生命周期:
- 又名:生命周期回调函数、生命周期函数、生命周期钩子。
- 是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。
- 生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。
- 生命周期函数中的this指向是vm或组件实例对象。
常用的生命周期钩子:
- mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等[初始化操作]
- beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等[收尾工作]
关于销毁Vue实例
- 销毁后借助Vue开发者工具看不到任何信息。
- 销毁后自定义事件会失效,但原生DOM事件依然有效。
- 般不会再beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了。
生命周期函数 | 场景 | 备注 |
---|---|---|
beforeCreate | 此时:组件的选项对象还未创建,el 和 data 并未初始化,无法通过vm访问到data中的数据、methods中的方法。 | |
created | 此时:实例已经创建完成之后被调用,在这一步,实例已完成以下配置:数据观测、属性和方法的运算,watch/event事件回调,完成了data 数据的初始化,el没有。可以通过vm访问到data中的数据、methods中配置的方法。 | $el属性目前不可见,这是一个常用的生命周期,因为你可以调用methods中的方法,改变data中的数据,并且修改可以通过vue的响应式绑定体现在页面上,,获取computed中的计算属性等等,通常我们可以在这里对实例进行预处理,值得注意的是,这个周期中是没有什么方法来对实例化过程进行拦截的,因此假如有某些数据必须获取才允许进入页面的话,并不适合在这个方法发请求,建议在组件路由钩子beforeRouteEnter中完成 |
beforeMount | 此时: 1.页面呈现的是未经Vue编译的DOM结构。 2.所有对DOM的操作,最终都不奏效。 | |
mounted | 此时: 1.页面中呈现的是经过Vue编译的DOM 2.对DOM的操作均有效(尽可能避免)。至此初始化过程结束, | 此时一般可以做一些ajax操作,mounted只会执行一次。 |
beofreUpdate | 此时:数据是新的,但页面是旧的,即:页面尚末和数据保持同 | 可以在该钩子中进一步地更改状态,不会触发附加地重渲染过程 |
updated | 此时:数据是新的,页面也是新的,即:页面和数据保持同步。 | 可以执行依赖于DOM的操作,然后在大多是情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环,该钩子在服务器端渲染期间不被调用 |
beforeDestroy | 在实例销毁之前调用,实例仍然完全可用; | 这一步还可以用this来获取实例; 一般在这一步做一些重置的操作,比如清除掉组件中的定时器 和 监听的dom事件 |
destroyed | 在实例销毁之后调用 | 调用后,所以的事件监听器会被移出,所有的子实例也会被销毁,该钩子在服务器端渲染期间不被调用 |
其它三个钩子函数
类型:Function
- activated(激活前) :keep-alive专属,组件被激活时调用
- deactivated(激活后) :keep-alive专属,组件被销毁时调用
类型:(err: Error, instance: Component, info: string) => ?boolean
- errorCaptured:在捕获一个来自后代组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回
false
以阻止该错误继续向上传播。- 你可以在此钩子中修改组件的状态。因此在捕获错误时,在模板或渲染函数中有一个条件判断来绕过其它内容就很重要;不然该组件可能会进入一个无限的渲染循环。
Vue3新增两个钩子
类型均为:(e: DebuggerEvent) => void
-
renderTracked:跟踪虚拟 DOM 重新渲染时调用。钩子接收
debugger event
作为参数。此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。 -
renderTriggered:当虚拟 DOM 重新渲染被触发时调用。和
renderTracked
类似,接收debugger event
作为参数。此事件告诉你是什么操作触发了重新渲染,以及该操作的目标对象和键。
官网的生命周期图解
Vue子组件和父组件执行顺序
- 加载渲染过程:
beforeCreate
(父) —>created
(父)—>beforeMount
(父)—>beforeCreate
(子)—>created
(子)—>beforeMount
(子)—>mounted
(子)—>mounted
(父) - 更新过程:
beforeUpdate
(父) —>beforeUpdate
(子) —>update
(子) —>update
(父) - 销毁过程:
beforeDestory
(父) —>beforeDestory
(子) —>destoryed
(子) —>destoryed
(父)