- 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
初始化阶段生命周期钩子函数
-
beforeCreate: 在实例初始化之前执行，此时是一个空的实例对象，只有一些默认的生命周期函数和默认的事件， data 和 methods 都没有初始化
let vm = new Vue({
el : '#zz',
data : {
message : 'Hello world !',
tip : '数据驱动视图'
},
methods : {
say () {
console.log(this.message);
}
},
beforeCreate : function () {
console.log(this.message);
this.say();
},
});
输出
beforeCreate.png
-
created: data 和 methods 都已经初始化好了，如果要操作 data 和 methods ，最早只能在 created中
let vm = new Vue({
el : '#zz',
data : {
message : '数据驱动视图'
},
methods : {
say () {
console.log('调用了say方法');
}
},
created : function () {
console.log(this.message);
this.say();
},
});
结果
created.png
-
beforeMount： 在模板编译完成后，在页面上挂载之前执行。也就是说内存中已经有了一个编译好的最终的模板字符串，并且渲染为内存中的 DOM ，当时并没有挂载到页面上去，页面上并没有将插值表达式中的字符串替换过来。
let vm = new Vue({
el : '#zz',
data : {
message : '数据驱动视图'
},
methods : {
say () {
console.log('调用了say方法');
}
},
beforeMount : function () {
var oP = document.getElementsByTagName('p')[0];
console.log(oP.innerHTML);
}
});
结果
beforeMount.png
-
mounted： 内存中的模板已经挂载到页面中，用户可以看到已经渲染好的页面。这是实例创建期间的最后一个生命周期函数，执行完 mounted 后实例就初始化完成，驻存在内存中等待调用进入到运行阶段，如果要操作 DOM 最早只能在 mounted 中做。
let vm = new Vue({
el : '#zz',
data : {
message : '数据驱动视图'
},
methods : {
say () {
console.log('调用了say方法');
}
},
mounted : function () {
var oP = document.getElementsByTagName('p')[0];
console.log(oP.innerHTML);
}
});
结果
mounted.png
运行阶段生命周期钩子函数
-
beforeUpdate： 当数据发生改变时执行，但是此时页面还没有被更新，页面和数据不同步
let vm = new Vue({
el : '#zz',
data : {
message : '数据驱动视图'
},
methods : {
say () {
console.log('调用了say方法');
}
},
beforeUpdate : function () {
var oP = document.getElementsByTagName('p')[0];
console.log(oP.innerHTML);
console.log(this.message);
}
});
结果 : 我们可以看到，当我改变数据 message 时，执行了这个生命周期函数，页面内容并没有改变，但是实例中的数据已经更新了
beforeUpdate.png
-
updated：数据更新后，内存中的 DOM 重新渲染并挂载到页面上，已经完成了 数据(Model) 到 视图(view) 的更新然后执行这个生命周期函数。
let vm = new Vue({
el : '#zz',
data : {
message : '数据驱动视图'
},
methods : {
say () {
console.log('调用了say方法');
}
},
updated : function () {
var oP = document.getElementsByTagName('p')[0];
console.log(oP.innerHTML);
console.log(this.message);
}
});
结果
updated.png
销毁阶段生命周期钩子函数
-
beforeDestroy: 当执行 beforeDestroy 钩子函数的时候，实例就已经从运行阶段进入到销毁阶段，实例身上所有的 data 和 methods 以及 filters ，directives ... 都可以使用，还没有真正执行销毁阶段。 -
destroyed： 实例已经完全被销毁了，实例身上所有的 data 和 methods 以及 filters ，directives ... 都不可以使用了。
