vue生命周期

vue的学习首要任务是掌握生命周期
beforeCreate--组件刚刚创建，组件属性就算之前，data属性等
created---组件刚刚创建完成，属性已经绑定，DOM还未生成，$el属性还不存在
beforeMount--模板编译挂载之前
mounted --- 模板编译挂载之后
beforeUpdate --- 组件更新之前
updated --- 组件更新之后
activated---组件被激活时调用
deactivated -- 组件被移除时调用
beforeDistory -- 组件销毁前调用
distoryed -- 组件销毁后调用
对于执行顺序和什么时候执行，基本有个了解了。下面我们将结合代码去看看钩子函数的执行

var app = new Vue({
  el: '#app',
  data: {
      message : "hello world" 
  },
   beforeCreate: function () {
            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)  
    },
    created: function () {
        console.group('created 创建完毕状态===============》');
        console.log("%c%s", "color:red","el     : " + this.$el); //undefined
           console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
           console.log("%c%s", "color:red","message: " + this.message); //已被初始化
    },
    beforeMount: function () {
        console.group('beforeMount 挂载前状态===============》');
        console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
        console.log(this.$el);
           console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
           console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
    },
    mounted: function () {
        console.group('mounted 挂载结束状态===============》');
        console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
        console.log(this.$el);    
           console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
           console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
    },
    beforeUpdate: function () {
        console.group('beforeUpdate 更新前状态===============》');
        console.log("%c%s", "color:red","el     : " + this.$el);
        console.log(this.$el);   
           console.log("%c%s", "color:red","data   : " + this.$data); 
           console.log("%c%s", "color:red","message: " + this.message); 
    },
    updated: function () {
        console.group('updated 更新完成状态===============》');
        console.log("%c%s", "color:red","el     : " + this.$el);
        console.log(this.$el); 
           console.log("%c%s", "color:red","data   : " + this.$data); 
           console.log("%c%s", "color:red","message: " + this.message); 
    },
    beforeDestroy: function () {
        console.group('beforeDestroy 销毁前状态===============》');
        console.log("%c%s", "color:red","el     : " + this.$el);
        console.log(this.$el);    
           console.log("%c%s", "color:red","data   : " + this.$data); 
           console.log("%c%s", "color:red","message: " + this.message); 
    },
    destroyed: function () {
        console.group('destroyed 销毁完成状态===============》');
        console.log("%c%s", "color:red","el     : " + this.$el);
        console.log(this.$el);  
           console.log("%c%s", "color:red","data   : " + this.$data); 
           console.log("%c%s", "color:red","message: " + this.message)
    }
})