VueJS2.0 生命周期和钩子函数的一些理解

所谓“生命周期”，是指对象从构造函数开始执行（被创建）到被gc回收销毁的整个存在的时期。

“钩子”就是在某个阶段给你一个做某些处理的机会。

vuejs2.0的生命周期可以总共分为8个阶段：

beforeCreate（创建前）,

created（创建后）,

beforeMount(载入前),

mounted（载入后）,

beforeUpdate（更新前）,

updated（更新后）,

beforeDestroy（销毁前）,

destroyed（销毁后）

生命周期钩子的一些使用方法：

beforecreate : 可以在这加个loading事件，在加载实例时触发 
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom

this.$nextTick(() => {//$nextTick函数用于更新数据后立即操作dom,选中初始默认菜单 //被选中菜单处理样式
 let td = document.getElementsByClassName('menu-click')
if (td) {//把先前的样式置空
 for (let o of td) {
o.setAttribute("class", "")
        }
    }
let doc = document.getElementById(item.label)
if (doc) {//重设置样式
 doc = doc.setAttribute("class", "menu-click")
    }
})

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)}

详情用法说明请参照官方API文档： https://cn.vuejs.org/v2/api/