This is the 24th day of my participation in the August Text Challenge.More challenges in August

Before each Vue instance is created, it goes through a series of initialization procedures called the lifecycle of the Vue. During this process, functions called lifecycle hooks are also run, giving users the opportunity to add their own code at different stages. This means that vue calls special functions at specific times before your page is rendered

1. Hook functions

Different hook functions are called at different times. For example, an created hook can be used to execute code after an instance is created.

Start to create

  • beforeCreate

You have created

  • created

The virtual DOM replaces the real DOM

  • beforeMount

This hook is not called during server-side rendering because only the initial rendering takes place on the server side.

  • mounted

Update the status

  • beforeUpdate
  • updated

Destroy the VUE instance

  • beforeDestroy
  • destroyed

2. Common lifecycle methods

1. Mounted (): Sends Ajax requests to start asynchronous tasks, such as timers

BeforeDestory (): Do finishing tasks, such as clearing timers

3. The demo

    <div id="app">
        {{data}}
    </div>
Copy the code
var vm = new Vue({
        el:"#app".data: {data:"best".name:"badspider"
        },
        beforeCreate:function(){
            console.log("Pre-creation")
            console.log(this.data)
            console.log(this.$el)
        },
        created:function(){
            console.log("Created")
            console.log(this.name)
            console.log(this.$el)
        },
        beforeMount:function(){
            console.log("Before mounting")
            console.log(this.name)
            console.log(this.$el)
        },
        mounted:function(){
            console.log("Mount")
            console.log(this.name)
            console.log(this.$el)
        },
        beforeUpdate:function(){
            console.log("Before Update");

        },
        updated:function(){
            console.log("Update completed");
        },
        beforeDestroy:function(){
            console.log("Before destruction.")
            console.log(this.name)
            console.log(this.$el)
        },
        destroyed:function(){
            console.log("Destroyed")
            console.log(this.name)
            console.log(this.$el)
        }
    })
Copy the code

The other three hook functions

  • Actived ——- is called when activated by a component cached by keep-alive.

This hook is not called during server-side rendering.

  • Deactivated ——— is called when a component in the keep-alive cache is disabled.
  • ErrorCaptured —— Is called when an error is caught from a descendant component

It may seem a little silly now, but as you use it, you’ll start to realize how powerful these functions are