实例生命周期钩子
每个Vue实例在被创建时都要经过一系列的初始化过程 - 例如,需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会一些运行叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
比如 created
钩子可以用来在一个实例被创建³³之后执行代码:
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
也有一些其他的钩子,在实例生命周期的不同阶段被调用,如 mounted
,updated
和 destroyed
。生命周期钩子的 this
上下文指向调用它的Vue实例。
在不要选项对话属性或回调上使用箭头函数,比如
created: () => console.log(this.a)
或
vm.$watch('a', newValue => this.myMethod())
。因为箭头函数是和父级上下文绑定在一起的,this
不会是如你所预期的Vue实例,经常导致
Uncaught TypeError: Cannot read property of undefined
或
Uncaught TypeError: this.myMethod is not a function
之类的错误。也有一些其它的钩子,在实例生命周期的不同阶段被调用,如 mounted
,updated
和 destroyed
。生命周期钩子的 this
上下文指向调用它的Vue实例。
生命周期图示
下图展示了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。