Vue的生命周期
Vue实例从创建和销毁的过程就是它的生命周期。
这一过程中会有一些关键时刻。比如渲染完成、初始化完成和被销毁。
Vue的生命周期钩子
对于生命周期中的关键时刻,我们可以以回调方法的方式进行回调,这就是生命周期钩子,被回调的方法叫做生命周期钩子函数。
Vue生命周期图示
参考官网 https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
图中总共显示了8个红色的方框,包含看代表了8个生命周期钩子:
- beforeCreate
- created
- beforeMount 数据被载入前
- mounted 数据被载入后
- beforeUpdate
- updated
- beforeDestroy
- destroyed
生命周期钩子的用法
为了使用这些钩子,我们只需要在初始化Vue对象的时候重写这些方法即可:
var app = new Vue({
el: '#app',
data: function () {
return {
message: "Hello, Vue World!"
}
},
beforeCreate: function () {
console.log("a message in beforeCreate " + this.message)
},
created: function() {
console.log("a message in created " + this.message)
},
beforeMount: function() {
console.log("a message in beforeMount " + this.message)
},
mounted: function() {
console.log("a message in mounted " + this.message)
}
})
对于上述代码,beforeCreate
中因为message
还没有被创建出来,所以会输出undefined
,其他三个都会输出data
里面的Hello, Vue World!
。
这些钩子都是通过this
指针来访问Vue对象里面的数据,所以,我们不能使用箭头函数来重写钩子,因为箭头函数并不能用this
访问我们的Vue对象。
Top comments (0)