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)    }})复制代码