[vue] vue生命周期总共有几个阶段?
Activity
Sihan-Tan commentedon Jul 23, 2019
8
censek commentedon Nov 20, 2019
new
一个 vue 实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建。data
和methods
都已经被初始化好了。(如果要调用 methods 中的方法,或者操作 data 中的数据,最早可以在这个阶段中操作)编译好了模板
了,但是还没有挂载
到页面中,此时,页面还是旧的。Vue 实例已经初始化
完成了。此时组件脱离了创建阶段,进入到了运行阶段。 (如果我们想要通过插件操作页面上的DOM
节点,最早可以在和这个阶段中进行)data
中的数据是更新后的, 页面还没有和最新的数据保持同步。data
中的数据已经保持同步
了,都是最新的。进入到了销毁阶段
,这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于可用状态。还没有真正被销毁。已经被销毁
了。benbtx commentedon Mar 13, 2020
11
radio-qq commentedon Jan 3, 2021
10吧
xiaoyuan4 commentedon May 4, 2021
8
sc950828 commentedon Sep 23, 2022
Cai-zhiji commentedon Jul 7, 2023
Vue生命周期的作用是在组件的不同阶段执行相应的钩子函数,从而允许开发者在关键时刻添加自定义的逻辑或进行相关操作。生命周期钩子函数提供了一种控制组件行为的方式,让开发者可以在组件的不同生命周期阶段进行初始化、更新数据、监听事件、执行异步操作等。
8
以下是Vue的生命周期钩子函数及其作用:
beforeCreate:
在实例创建之前调用。
适用于执行一些初始化任务、设置组件状态或引入插件等操作。
created:
在实例创建之后调用。
适用于执行异步操作、请求数据、监听事件或对数据进行初始化操作。
beforeMount:
在组件挂载到DOM之前调用。
适用于进行一些DOM操作或准备组件渲染的数据。
mounted:
在组件挂载到DOM之后调用。
适用于执行一些需要DOM的操作、初始化第三方库、发送网络请求或启动定时器等。
beforeUpdate:
在组件更新之前调用,即响应式数据发生变化但DOM尚未更新。
适用于在更新之前进行准备工作、检查数据变化或进行异步操作。
updated:
在组件更新完成之后调用,即DOM已经更新。
适用于执行一些需要DOM的操作、更新第三方库或与其他组件进行交互等。
beforeUnmount:
在组件卸载之前调用。
适用于执行一些清理操作、取消订阅、移除事件监听器或释放资源等。
unmounted:
在组件卸载之后调用。
适用于执行最后的清理操作、销毁定时器或解除绑定等。
生命周期钩子函数使开发者能够在组件的不同阶段进行处理,控制组件的行为和数据的更新。通过合理使用生命周期钩子函数,可以实现更精确的控制和交互,优化组件性能,并处理组件的初始化、更新和销毁等方面的逻辑。