vue的生命周期钩子函数

vue生命周期钩子函数详解

关于生命周期的钩子函数，做出了如下介绍：

这是生命周期的八个钩子函数

附代码如下（js部分）：
var app = new Vue({
el: ‘#app’,
data: {
message: “hahahahhahahahah”
},
beforeCreate: function () {
console.group(‘beforeCreate 创建前状态===============》’);
console.log("%c%s", “color:red”, “el : " + this.$el);//undefinedconsole.log("$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);//undefinedconsole.log("$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.KaTeX parse error: Expected 'EOF', got '}' at position 118: … }̲, m…el); //已被初始化
console.log(this.$el);console.log("$data); //已被初始化
console.log(”%c%s", “color:red”, “message: " + this.message); //已被初始化
this.message = “hahahahahaha”;
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.KaTeX parse error: Expected 'EOF', got '}' at position 98: …); }̲, u…el);
console.log(this.$el);console.log("$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.KaTeX parse error: Expected 'EOF', got '}' at position 98: …); }̲, d…el);
console.log(this.$el);console.log("$data);
console.log(”%c%s", “color:red”, "message: " + this.message)
}
})
展示的结果图如下：
可以看出：
在beforeCreate这个阶段，组件实例刚被创建，还未完成初始化， 挂载元素el:undefinde; 数据对象data:undefined; message:undefined;
在created阶段，其实是已经完成如下配置：数据观测（data observe）,属性和方法的运算，event和watch回调，但是，挂载还没有开始，$el还没有。 此处的挂载没有完成意味着模板没有生成html页面，即无法通过id等获取到页面的信息。但是此处可以发送Ajax请求。
在beforeMount阶段，data和el已经完成了初始化，但是很明显的就是

此处的el还是{{message}}，这里就是使用了虚拟DOM技术，先占位，值还未渲染。等到mounted的时候，挂载完成，渲染到真实的DOM。
在boforeUpdate处，当data数据发生改变时，会触发。理解为：视图层的数据发生改变时触发。视图层的数据发生变化，才会触发boforeUpdate，当我没直接在mounted里更改data中的数据的时候，实际上并不会触发boforeUpdate。如果视图层数据被改变后，会触发beforeUpdate，如果在beforeUpdate里再一次改变数据，此时会再一次触发beforeUpdate吗？并不会，mounted改变了message，视图层的message发生变化，此时触发beforeUpdate，尽管beforeUpdate再次改变了message，但此时mounted改变过后的message还没有更新到视图层，因此在beforeUpdate里再次变化message的是没有更新到视图层的message，当然不会再次触发beforeUpdate。但是在updated里改变message后触发了beforeupdate（不建议，处理不好会造成死循环）。
destroyed钩子函数有一点一定要特别注意：在执行destroy方法后，对data的改变不会再触发周期函数，此时的vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。所以对于实时显示的通知型组件，在他destroyed之前，我们必须手动removeChild()删除该节点；否则，DOM节点还是存在，影响浏览器性能。
【扩展】：在父子组件传值时，先执行父组件的created和beforeMounted函数；再按子组件的使用顺序，执行子组件的created和beforeMounted函数；依旧按照子组件的执行顺序执行mounted函数，最后是父组件的mounted函数；
也就是说父组件准备要挂载还没挂载的时候，子组件先完成挂载，最后父组件再挂载；所以在真正整个大组件挂载完成之前，内部的子组件和父组件之间的数据时可以流通的