一、简述
- Vue 实例从创建到销毁的过程,就是生命周期。
- 又名生命周期回调函数,生命周期函数,但最常说的还是生命周期钩子,他们是Vue在关键时刻帮我们调用的一些特殊名称的函数
- 生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的
- 声明周期函数中的this指向是vm或组件实例对象(vc)
二、生命周期流程
Vue生命周期包含四对重要的函数,也就是8个函数分别为:
- 创建阶段:beforCreate(),created()
- 挂载阶段:beforeMount(),mounted
- 更新阶段:beforeUpdate(),updated()
- 销毁阶段:beforeDestroy(),destroyed()
1、创建阶段
创建阶段包括创建前(beforCreate()),创建后(created())
- 首先在beforeCreate()之前,创建Vue实例对象,进行初始化:生命周期,事件,但是数据代理并未开始,紧接着进入beforeCreate()
- beforeCreate()阶段: 此时,因为并未进行数据代理,所以无法通过vm方法访问到data中的数据,methods中的方法
- 然后进行初始化:数据监测,数据代理,进入created()阶段
- created()阶段: 此时,可以通过vm访问data中的数据,methods中配置的方法
- 紧接着Vue开始解析模板,生成虚拟DOM(内存中),页面还不能显示解析好的内容,进入到挂载阶段
2.挂载阶段
挂载阶段包括挂载前(beforeMount()),挂载后(mounted())
- beforeMount()阶段:此时页面上呈现的是未经Vue编译的DOM结构,所有对DOM的操作,最终都不奏效(仍然可以获取数据)
-
然后将内存中的虚拟DOM转为真实DOM插入页面
-
mounted()阶段:此时页面上呈现的是经过Vue编译的DOM, 对DOM的操作均有效(尽可能避免),至此初始化过程结束,一般在这进行:开启定时器,发送网络请求,订阅消息,绑定自定义事件等初始化操作
-
当有人对数据进行修改时进入到更新阶段
3.更新阶段
更新阶段包括更新前(beforeUpdate()),更新后(updated())
- beforeUpdate()阶段:此时数据是新的,但页面时旧的,即:页面尚未和数据保持同步
-
然后根据新数据,生成新的虚拟DOM,随后与旧的虚拟DOM进行比较,最终完成页面的更新,即完成了Model->View的更新,进入updated()阶段
-
updated()阶段:此时,数据是新的,页面也是新的,即:页面和数据保持同步
-
此时vm所有的:data,methods,指令等,都处于可用状态,进入销毁阶段
销毁阶段:
销毁阶段包括销毁前(beforeDestroy()),销毁后(destroyed())
- beforeDestroy():在此阶段:关闭定时器,取消订阅消息,解绑自定义事件等收尾操作,在此阶段对数据及方法的操作都不会引发数据更新
- destroyed(): 移除身上所有的组件实例与自定义事件监听器
至此生命周期完结
三、总结
常用的生命周期钩子:
- mounted:发送ajax请求,启动定时器,绑定自定义事件,订阅消息等[初始化操作]
- beforDestory:清除定时器,解绑自定义事件,取消订阅消息等[收尾工作]
关于销毁Vue实例:
- 销毁后借助Vue开发者工具看不到任何信息
- 销毁后自定义事件会失效,但原生DOM事件依然有效
- 一般不会在beforDestory操作数据,因为即使操作数据,也不会再触发更新流程了