VUE 的生命周期钩子
VUE2
- 创建阶段
beforeCreate实例初始化之后,数据观测和事件尚未设置
created 实例创建完成
- 挂载阶段
beforeMount 挂载之前调用,模板已经编译成渲染函数
mounted 挂载完成 dom已经生成
- 更新阶段
beforeUpdate 数据更新后,视图更新前
updated 视图更新后调用
- 销毁阶段
beforeDestory 实例销毁前调用 仍可访问实例
destoryed 事件监听 子实例均被移除
Keep-alive特有生命周期钩子
activated 组件被激活时调用
deactivated 组件被停用时调用
VUE3
- 创建阶段(Composition API 替代)
setup 组件实例初始化时调用,发生在 beforeCreate 和 created 之前,用于声明响应式状态、计算属性和方法。
注:Options API 中仍可使用
beforeCreate/created,但 Composition API 推荐统一在setup中完成初始化。
- 挂载阶段
onBeforeMount 组件挂载之前调用,此时模板已编译成渲染函数,但 DOM 尚未生成。
onMounted 组件挂载完成后调用,此时可以安全地访问 DOM 节点,适合执行依赖 DOM 的操作。
- 更新阶段
onBeforeUpdate 响应式数据变化后,视图重新渲染之前调用。
onUpdated 视图重新渲染并更新 DOM 完成后调用。避免在此钩子中修改数据,以防无限更新循环。
- 卸载阶段
onBeforeUnmount 组件实例即将卸载之前调用,此时实例依然保有全部功能。
onUnmounted 组件实例卸载完成后调用,此时所有事件监听器、子组件实例均已被移除。
KeepAlive特有生命周期钩子
onActivated 被缓存的组件激活时调用。
onDeactivated 被缓存的组件停用时调用。
- 其他
onErrorCaptured 捕获后代组件传递的错误时调用。
onRenderTracked / onRenderTriggered (仅开发模式)用于调试渲染依赖的追踪和触发。