Detailed explanation of Vue life cycle

Why understand the life cycle

Using the Vue framework and being familiar with its life cycle can make development go better.

If you just know the simple syntax in vue, you can implement some corresponding projects and ideas, but if a problem occurs, we need to use the life cycle to find the problem. Even if there are some requirements, you can also use the life cycle to determine where we should write this thing. Therefore, it is necessary to understand the life cycle of Vue.

What is Life Cycle

The process from creation to destruction of a Vue instance is the life cycle. In detail, it is a series of processes from creation, initialization of data, compilation of templates, mounting of Dom, rendering → updating → rendering, uninstallation, etc.

In addition, the Vue instance is the entry point of the Vue framework and can be understood as the front-end ViewModel. It contains the business logic processing and data model in the page. It also has its own series of life cycle function hooks to assist us in performing js control over the entire Vue instance generation, compilation, hanging, and destruction process.
The life cycle diagram given by the official website (translated into Chinese) is as follows:

Lifecycle hook functions

Lifecycle hook is just an alias for lifecycle event. Lifecycle hook = lifecycle function = lifecycle event

The main life cycle function categories are:

Lifecycle functions during creation:
beforeCreate: The instance has just been created in memory. At this time, the data and methods attributes have not yet been initialized.
created: The instance has been created in memory. The data and methods have been created. The template has not yet been compiled.
beforeMount: The template has been compiled but has not yet been mounted on the page
Mounted: At this point, the compiled template has been mounted to the container specified by the page for display

Life cycle functions during runtime:
beforeUpdate: This function is executed before the state is updated. At this time, the state value in data is the latest, but the data displayed on the interface is still old because the DOM node has not yet been re-rendered.
updated: This function is called after the instance is updated. At this time, the status value in the data and the data displayed on the interface have been updated, and the interface has been re-rendered!

Life cycle functions during destruction:
beforeDestroy: called before the instance is destroyed. At this step, the instance is still fully usable.
destroyed: called after the Vue instance is destroyed. After the call, everything pointed to by the Vue instance will be unbound, all event listeners will be removed, and all child instances will be destroyed.

created and mounted

Among the life cycle hook functions, the most commonly used ones are probably created and mounted.

created: Called before the template is rendered into HTML, which usually initializes certain attribute values ​​and then renders it into a view. Main applications: calling data, calling methods, calling asynchronous functions
Mounted: Called after the template is rendered into HTML, usually after the page is initialized, and then some necessary operations are performed on the HTML DOM node.

When creating, the HTML in the view is not rendered, so if you directly operate the DOM node of HTML at this time, you will definitely not find the relevant elements. In mounted, since HTML has been rendered at this time, you can directly operate the DOM node.

In fact, the two are relatively easy to understand. Usually create is used more often, while mounted is usually performed when using some plug-ins or components. For example, when using the chart.js plug-in: var ctx = document.getElementById(ID); there is usually this step. If you write it into a component, you will find that you cannot perform some initialization configuration on the chart in create. You must wait until the html is rendered before you can proceed. In this case, mounted is the only choice.

Some practical uses of hooks

1. Asynchronous functions

Here we use a timer to do asynchronous functions

<div id="app">
    <ul>
        <li v-for="(item,index) of list" key="index">{{item}}</li>
    </ul>
</div>

<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
            list:['aaaaaaaa','bbbbbbb','ccccccc']
        },
        created:function(){
            consoloe.log('created asynchronously: aaaaa');
            //Asynchronous data acquisition // Because it is asynchronous, it is the same as our ajax data acquisition setTimeout(()=>{
                this.list=['111','222','333','444'],
                console.log('created asynchronously:', document.getElementsByTagName('li').length);
            },0)
        },
        mounted: function () {
            console.log('mounted:',document.getElementsByTagName('li').length);
        },
        updated: function () {
            console.log('updated:',document.getElementsByTagName('li').length)
        },
    })
</script>

The result is:

create: aaaaaaaa
mounted: 3
Created asynchronous function: 3
updated: 4

explain:

You can see that because the asynchronous function is added to the created hook, the execution order of the function is:

ceated hook, mounted hook, asynchronous function, updated hook (according to the event queue principle, only after updated, the li is truly rendered as 4 DOM, so the number of li obtained in the asynchronous function is the same as the number of li that has not changed).

Because mounted gets the DOM rendered by setting the initial value in Vue's data, and we are changing the list data in the asynchronous function, the number of li obtained by mounted is 3.

The update function is triggered as long as the data bound by the data vue changes, so it is executed last, which is 4

Does this mean that we can operate directly in the update function? Actually, not really, because the update function is for all data changes in vue, and we may also have other data changes.

For example, the following example:

// We use the asynchronous function to change the list twice, and we will find that the update is triggered twice created: function() {
        //Asynchronous data acquisition // Because it is asynchronous, it is the same as our ajax data acquisition setTimeout(()=>{
             this.list=['111','222','333','444'],
             console.log('created asynchronously:', document.getElementsByTagName('li').length);
        },0)
        setTimeout(()=>{
             this.list=['Happy Camp', 'Down to Earth', '300033', 'Everyday Progress', 'Study Hard'],
             console.log('created asynchronously:', document.getElementsByTagName('li').length);
        },1000)
},
mounted: function () {
        console.log('mounted:',document.getElementsByTagName('li').length);
},
updated: function () {
        console.log('updated:',document.getElementsByTagName('li').length)
},

The result is:

2. Vue.nextTick operates on the results of asynchronous functions

When we want to change the data, each triggers its own method

created:function(){
//Asynchronous data acquisition // Because it is asynchronous, it is the same as our ajax data acquisition // In order to wait for Vue to complete updating the DOM after the data changes, you can use Vue.nextTick(callback) immediately after the data changes. This way the callback function will be called after the DOM update is completed.
    setTimeout(()=>{
        this.list=['111','222','333','444'],
        console.log('created asynchronously:', document.getElementsByTagName('li').length);
        this.$nextTick(function(){
            console.log("created$nextTick：",document.getElementsByTagName('li').length)
        });
    },0)
    setTimeout(()=>{
        this.list=['Happy Camp', 'Down to Earth', '300033', 'Everyday Progress', 'Study Hard'],
        console.log('created asynchronously:', document.getElementsByTagName('li').length);
        this.$nextTick(function(){
            console.log("created$nextTick：",document.getElementsByTagName('li').length)
        });
    },1000)
},
mounted: function () {
    console.log('mounted:',document.getElementsByTagName('li').length);
},
updated: function () {
  console.log('updated:',document.getElementsByTagName('li').length)
},

The result is:

We can see that through $nextTick we can perform our own operations on the results of asynchronous functions

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!