Vue 生命周期指的是 Vue 实例从创建到销毁的整个过程中,所经历的不同阶段,在每个阶段 Vue 都提供了一系列的钩子函数(Lifecycle Hooks),允许开发者在特定阶段执行自定义逻辑。
Vue 生命周期可以分为以下几个阶段:
-
创建阶段(Creation):
- beforeCreate:实例刚在内存中创建,数据观测和事件配置之前被调用。
- created:实例已经创建完成,实例上的数据观测和事件配置已完成,但挂载阶段还未开始。
-
挂载阶段(Mounting):
- beforeMount:挂载开始之前被调用,此时模板编译已完成,但尚未将模板挂载到 DOM 中。
- mounted:挂载完成,实例已经挂载到 DOM 中,可以进行 DOM 操作。
-
更新阶段(Updating):
- beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
- updated:数据更新完成,组件 DOM 已更新。
-
销毁阶段(Destroying):
- beforeDestroy:实例销毁之前调用,此时实例仍然完全可用。
- destroyed:实例销毁之后调用,所有的事件监听器和子实例已被移除。
此外,Vue 还提供了一些其他的生命周期钩子函数,比如 activated
和 deactivated
(用于 <keep-alive>
组件)、errorCaptured
(用于捕获子孙组件错误)等。
通过这些生命周期钩子函数,可以在不同的阶段执行自定义的操作或逻辑,比如在数据更新时执行某个函数、在组件销毁前进行清理等。这些钩子函数为开发者提供了丰富的控制和扩展 Vue 实例的能力。
Was this helpful?
0 / 0