从 Vue 实例创建、运行、到销毁期间总是伴随着各种各样的事件,这些事件统称为生命周期。在生命周期的不同阶段 Vue 会调用不同的钩子函数,我们可以通过这些钩子函数在 Vue 生命周期的不同阶段进行操作。
# 生命周期图
下面是官方提供的生命周期示例
# 生命周期函数
通过生命周期图我们可以将钩子函数分为下面三类
初始化时期
依次调用 beforeCreate
、 created
、 beforeMount
、 mounted
运行时期
依次调用 beforeUpdate
、 updated
销毁时期
依次调用 beforeDestroy
、 destroyed
# 使用钩子函数
这些函数会在 Vue 生命周期的不同阶段被调用,我们可以在特定的钩子函数中执行一些操作。使用方式如下所示
new Vue({
el: '#app',
data: {
msg: 'hello Vue'
},
beforeCreate: function () {
...
},
created: function () {
...
}
...
});
2
3
4
5
6
7
8
9
10
11
12
13
# 初始化时期生命周期函数
# beforeCreate
此时 Vue 实例刚刚在内存中创建, data
与 methods
属性还没初始化
# created
此时实例已经创建完毕, data
与 methods
属性也已经创建完毕,但还没有编译模板 (template),如果需要执行 methods
中的方法或对 data
中的数据进行操作最早只能在该方法中执行,还可以在这里进行 Ajax 请求
模板编译
在 created
方法执行后 Vue 开始编译模板。此时开始执行 Vue 代码中的指令,在内存中生成一个编译好的模板字符串,然后把这个模板字符串渲染为内存中的 DOM。
# beforeMount
此时已经完成了模板的编译但还没有挂载到页面
# mounted
此时模板已经挂载到了页面中,DOM 已经渲染完毕,可以在这里对 DOM 进行操作,Vue 实例的创建阶段已经完成,接下来进入运行阶段
# 运行时期生命周期函数
# beforeUpdate
当状态发生改变 (如 data
中的数据发生变化时) 会执行该方法,此时 data
中的数据已经变为新值,但页面还未改变,因为此时还没有重新渲染 DOM 节点
# updated
此时界面已经渲染完毕, data
中的数据与页面显示保持一致
# 销毁时期生命周期函数
# beforeDestroy
Vue 实例销毁前会调用此方法,此时实例依然可以使用,可以在这里清除定时器或解除事件绑定
# destroyed
Vue 实例销毁后调用,调用后,Vue 实例指示的所有东西都会解除绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。