Vue's lifecycle hook

First introduce the key life cycles

beforeCreate: instance is initialized, called
     created: instance is called immediately after creation, the mounting phase has not yet started

 beforeMount: Called before the start of the mount, render is called for the first time (rendering)
    mounted: Called after the instance is mounted
Note: After the entire attempt is rendered, use vm.$nextTick inside mounted

 beforeUpdate: Called when the data is updated; manually remove the added event listener
     updated: Called after the data is updated;
Note: After the entire attempt is rendered, use vm.$nextTick inside the update

 actived: Called when the component cached by keep-alive is activated
deactivated: Called when the component cached by keep-alive is deactivated
This hook is not called on the server-side rendering device

 beforeDestroy: Called before the instance is destroyed
    destroyed: Called after the instance is destroyed
This hook is not called on the server-side rendering device

Let's take a look at the contents of a few life cycles

<div id="app">{
   
   {name  + age + msg}}</div>


<script>
    var vm = new Vue ({
        el:"#app",
        data:{
            name : "生命周期钩子 ",
            age :23,
            msg: " 异常优秀"
        },
        beforeCreate:function(){          //初始化之后调用
            console.log("beforeCreate");
            console.log(this);           //Vue 本身,生命周期中所有的 this 都是Vue 本身
            console.log(this.$data);     //undefined
        },
        created:function(){             //实例创建完成后调用，data !== undefined
            console.log("created");
            console.log(this.$data);    //Object
            console.log(this.$el);      //undefined
        },
        beforeMount:function(){         //实例挂载 之前 被调用
            console.log("beforeMount");
            console.log(this.$data);    //Object
            console.log(this.$el);      //body 中标签的模样
        },
        mounted:function () {           //实例挂载 之后 被调用
            console.log("mounted");
            console.log(this.$data);    //Object
            console.log(this.$el);      //加了内容的标签
        },
        beforeUpdate:function () {
            console.log("beforeUpdate");
        },
        updated:function () {
            console.log("updated");
        }
    })
</script>