Vue life cycle function (detailed explanation)

beforeCreate、created	before creation, after creation
beforeMount、mounted	before mount, after mount
beforeUpdate、updated	before update, after update
beforeDestroy、destroyed	before destruction, after destruction

Unified HTML code for the following four application scenarios

<div id="app">
    {
   
   {myName}}
</div>

The difference between beforeCreate and created

before creation, after creation

beforeCreate creates the application scene before creating

Vue code:

var app = new Vue({
        el: '#app',
        data() {
            return {
                myName:'abc',
            }
        },
        beforeCreate(){
            //获取body并输出测试
            var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
            console.log("created",this.myName,bodyDom);
        }
    });

Browser output:

The data of data in beforeCreate is not defined, created is followed by undefined and { {myName}} has not been recognized

created Application scenarios after creation

Vue code:

var app = new Vue({
    el: '#app',
    data() {
        return {
            myName:'abc',
        }
    },
    created(){
        //获取body并输出测试
        var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
        console.log("created",this.myName,bodyDom);
    }
});

Browser output:

created mainly does the data initialization of some page data, and obtains the value of myName, but the value of {{myName}} displayed in the background has not been filled in yet.

The difference between beforeMount and mounted

before mount, after mount

beforeMount application scenario before mounting

Vue code:

var app = new Vue({
    el: '#app',
    data() {
        return {
            myName:'abc',
        }
    },
    beforeMount(){
            //获取body并输出测试
            var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
            console.log("beforeMount",this.myName,bodyDom);
        },
    }
});

Browser output:

The output result is the same as created after creation, before mounting after creation, I feel that it is not very useful

mounted application scenario

Vue code:

var app = new Vue({
    el: '#app',
    data() {
        return {
            myName:'abc',
        }
    },
    mounted(){
            //获取body并输出测试
            var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
            console.log("beforeMount",this.myName,bodyDom);
        },
    }
});

Browser output:

The data has been rendered to the View

The difference between beforeUpdate and updated

Before update, after update; and the other three differences can be repeated

Application scenario beforeUpdate update

Vue code:

var app = new Vue({
    el: '#app',
    data() {
        return {
            myName:'abc',
        }
    },
    beforeUpdate(){
            //获取body并输出测试
            var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
            console.log("beforeMount",this.myName,bodyDom);
        },
    }
});

Browser output:

The data has not changed before the data update

updated Application scenario after update

Vue code:

var app = new Vue({
    el: '#app',
    data() {
        return {
            myName:'abc',
        }
    },
    updated(){
            //获取body并输出测试
            var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
            console.log("beforeMount",this.myName,bodyDom);
        },
    }
});

Browser output:

After data update, the data has changed

The difference between beforeDestroy and destroyed

before destruction, after destruction

beforeDestroy before destruction

Commonly applied scenarios:

clear timer
Unbind custom events
Unsubscribe, event listener

no specific code demo

destroyed _

This hook function will be executed after the component instance is destroyed. At this time, all components including subcomponents are destroyed.

There is no specific code demonstration

Summarize

Several lifecycle functions have their own characteristics, and different lifecycle functions are used to solve problems according to different businesses.