为什莫要了解生命周期函数呢?
01,因为在实际中,一个Vue实例从创建到销毁,期间我们可能需要在周期中的某些阶段做某些事。然而其生命周期函数则就是我们所需要知道的某些阶段。
02,在Vue2.0中,存在着beforeCreate、create 、beforeMount 、mounted 、beforeUpdate 、update 、beforeDestroy、destroy。
beforeCreate:基本数据data初始化之前
create:只是初始化基本数据data,还没有绑定挂载到目标元素之前
beforeMount:View层模板还没有数据注入之前
mounted:View层模板数据注入之后
其他存在迷惑就不叙述了…
03,具体示意图【出之官方文档图】
鄙人英文不才,英文备注如下
mount----------嵌入
compile-------编译
render---------渲染
virtual----------虚拟
patch----------打补丁
teardown-----拆卸
component–组件
injection------注入,注射
reactivity-----反应
代码测试【绝大部分来源】主要是懂就好
<!DOCTYPE html>
<html>
<head>
<title>vue_生命周期</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button id="change">data改变</button>
<button id="destroy">销毁</button>
</div>
<script src="js/vue2.0.js"></script>
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
message : "burningSnow"
},
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) //undefined
},
//初始化数据模型data
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);
}
})
document.querySelector('#change').addEventListener('click',() => vm.message = "燃情雪");
document.querySelector('#destroy').addEventListener('click',() => {
vm.$destroy();
//拆卸了Vue实例的所有绑定事件,监听,组件等...所以目标元素不再受所挂载Vue实例的控制
vm.message = "1111";//无效
});
</script>
</body>
</html>
在此迷惑的是
beforeUpdate 、update:beforeUpdate函数里面打印的结果表示View层已经随之更新了啊?【虚拟DOM和真实DOM是两个不同概念的东西,感觉问题就出在这儿,,,,】
beforeDestroy、destroy:beforeDestroy在此函数中View已经就不收所挂载实例Vue控制了啊?
小生不才,很是迷惑…
菜鸟爬行中…