vue的生命周期八个钩子函数

vue生命周期简介

生命周期认我们在控制整个vue时更容易形成更好的逻辑，可以分为四个阶段：创建阶段，挂载阶段，更新阶段，销毁阶段分别有：

创建阶段：
beforeCreate() 只有一些实例本身的事件和生命周期函数

 var vm = new Vue({
    el: '#app',
    data: {
        message: '今天是周一！！！'
    },
    beforeCreate(){
        console.group('beforeCreate 创建前状态==========>>');
        console.log("%c%s", "color:red", "el     : "+this.$el);   //undefined
        console.log("%c%s", "color:red", "data   : "+this.$data); //undefined
        console.log("%c%s", "color:red", "message: "+this.message);   //undefined
    },  

created() 是最早使用data和methods中数据的钩子函数

 created(){
        console.group('created 创建完毕状态==========>>');
        console.log("%c%s", "color:red", "el     : "+this.$el);   //undefined
        console.log("%c%s", "color:red", "data   : "+this.$data); //[object Object]
        console.log("%c%s", "color:red", "message: "+this.message);   //今天是周一！！！
    }, 

挂载阶段:
beforeMount() 指令已经解析完毕，内存中已经生成dom树

 beforeMount(){
        console.group('beforeMount 挂载前状态==========>>');
        console.log("%c%s", "color:red", "el     : "+this.$el);   //[object HTMLDivElement]
        console.log(this.$el);
        console.log("%c%s", "color:red", "data   : "+this.$data); //[object Object]
        console.log("%c%s", "color:red", "message: "+this.message);   //今天是周一！！！
    }, 

Mounted() dom渲染完毕页面和内存的数据已经同步

 mounted(){
        console.group('mounted 挂载结束状态==========>>');
        console.log("%c%s", "color:red", "el     : "+this.$el);   //[object HTMLDivElement]
        console.log(this.$el);  
        console.log("%c%s", "color:red", "data   : "+this.$data); //[object Object]
        console.log("%c%s", "color:red", "message: "+this.message);   //今天是周一！！！
    }, 	

更新阶段：
beforeUptate() 当data的数据发生改变会执行这个钩子，内存中的数据是新的，页面是旧的

beforeUpdate(){
        console.group('beforeUpdate 更新前状态==========>>');
        console.log("%c%s", "color:red", "el     : "+this.$el);   //[object HTMLDivElement]
        console.log(this.$el);
        console.log(this.$el.innerHTML);    //<p>今天是周一！！！</p>
        console.log("%c%s", "color:red", "data   : "+this.$data); //[object Object]
        console.log("%c%s", "color:red", "message: "+this.message);   //今天周二了！！！
    }, 

Updated() 内存和页面都是新的

 updated(){
        console.group('updated 更新完成状态==========>>');
        console.log("%c%s", "color:red", "el     : "+this.$el);   //[object HTMLDivElement]
        console.log(this.$el);
        console.log(this.$el.innerHTML);    //<p>今天周二了！！！</p>
        console.log("%c%s", "color:red", "data   : "+this.$data); //[object Object]
        console.log("%c%s", "color:red", "message: "+this.message);   //今天周二了！！！
    }, 

销毁阶段：
beforeDestroy() 即将销毁data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作

beforeDestroy(){
        console.group('beforeDestroy 销毁前状态==========>>');
        console.log("%c%s", "color:red", "el     : "+this.$el);   //[object HTMLDivElement]
        console.log(this.$el);
        console.log("%c%s", "color:red", "data   : "+this.$data); //[object Object]
        console.log("%c%s", "color:red", "message: "+this.message);   //今天周二了！！！
    }, 

Destroyed() 已经销毁完毕

 destroyed(){
        console.group('destroyed 销毁完成状态==========>>');
        console.log("%c%s", "color:red", "el     : "+this.$el);   //[object HTMLDivElement]
        console.log(this.$el);
        console.log("%c%s", "color:red", "data   : "+this.$data); //[object Object]
        console.log("%c%s", "color:red", "message: "+this.message);   //今天周二了！！！
    },

父子组件嵌套时触发钩子函数顺序
组件挂载阶段

父组件beforeCreate=>>父组件created=>>父组件beforeMount=>>子组件beforeCreate=>>子组件created=>>子组件beforeMount=>>子组件mounted=>>父组件mounted

即从创建到挂载，是从外到内，再从内到外
组件更新阶段
父组件beforeUpdate=>>父组件updated
组件销毁阶段
updated
父组件beforeDestroy=>>子组件beforeDestroy=>>子组件destroyed父组件destroyed
即销毁是从外到内，再从内到外