Skip to Content
Welcome to yujie-code-blogs build by Nextra 4.0 🎉
前端八股文合集VueVUE 的生命周期钩子

VUE 的生命周期钩子

VUE2

  1. 创建阶段

beforeCreate实例初始化之后,数据观测和事件尚未设置

created 实例创建完成

  1. 挂载阶段

beforeMount 挂载之前调用,模板已经编译成渲染函数

mounted 挂载完成 dom已经生成

  1. 更新阶段

beforeUpdate 数据更新后,视图更新前

updated 视图更新后调用

  1. 销毁阶段

beforeDestory 实例销毁前调用 仍可访问实例

destoryed 事件监听 子实例均被移除

  1. Keep-alive 特有生命周期钩子

activated 组件被激活时调用

deactivated 组件被停用时调用

VUE3

  1. 创建阶段(Composition API 替代)

setup 组件实例初始化时调用,发生在 beforeCreatecreated 之前,用于声明响应式状态、计算属性和方法。

注:Options API 中仍可使用 beforeCreate / created,但 Composition API 推荐统一在 setup 中完成初始化。

  1. 挂载阶段

onBeforeMount 组件挂载之前调用,此时模板已编译成渲染函数,但 DOM 尚未生成。

onMounted 组件挂载完成后调用,此时可以安全地访问 DOM 节点,适合执行依赖 DOM 的操作。

  1. 更新阶段

onBeforeUpdate 响应式数据变化后,视图重新渲染之前调用。

onUpdated 视图重新渲染并更新 DOM 完成后调用。避免在此钩子中修改数据,以防无限更新循环。

  1. 卸载阶段

onBeforeUnmount 组件实例即将卸载之前调用,此时实例依然保有全部功能。

onUnmounted 组件实例卸载完成后调用,此时所有事件监听器、子组件实例均已被移除。

  1. KeepAlive 特有生命周期钩子

onActivated 被缓存的组件激活时调用。

onDeactivated 被缓存的组件停用时调用。

  1. 其他

onErrorCaptured 捕获后代组件传递的错误时调用。

onRenderTracked / onRenderTriggered (仅开发模式)用于调试渲染依赖的追踪和触发。