【2025前端高频面试题——系列三之vue生命周期：vue3】

---

前言

提示：系列文章并未做很详细的讲解，旨在快速了解和复习前端的高频面试考点，所以并未做详细展开，只讲干货！！！

---

vue3 的生命周期有哪些？

很多人可能是从咱们的上一节 vue2篇 过来的，不过不管3还是2，都一样重点讲组件的四个阶段八个周期：初始化阶段、挂载阶段、更新阶段、注销阶段

1.组件创建时（初始化阶段）

setup()（替代 beforeCreate 和 created）

• 触发时机：组件初始化时最先执行。
• 作用：
  定义响应式数据（ref, reactive）。
  声明方法。
  组合逻辑（Composition API 的核心）。
  注意：setup() 执行时机早于 beforeCreate，created 逻辑需写在 setup 中

2. 组件被挂载时（挂载阶段）

onBeforeMount()

使用场景：

• 几乎不用，类似 Vue2 的 beforeMount。

onMounted()

使用场景：

• 操作 DOM（如初始化 ECharts 图表）。
• 发起依赖 DOM 的请求（获取元素尺寸）。
• 添加全局事件监听（window.addEventListener）。

3. 数据更新时（更新阶段）

onBeforeUpdate()

使用场景：

• 记录更新前的 DOM 状态（如滚动位置）。
• 移除旧的 DOM 事件监听。

onUpdated()

使用场景：

• 操作更新后的 DOM（如滚动到最新内容）。
• 同步第三方库状态（如更新地图位置）。
• ⚠️ 避免在此修改数据（可能导致无限循环）！

4. 组件卸载（卸载阶段）

onBeforeUnmount()

使用场景：

• 清除定时器（clearInterval）。
• 解绑全局事件（window.removeEventListener）。
• 释放外部资源（如销毁 ECharts 实例）。

onUnmounted()

使用场景：

• 几乎不用（此时组件已销毁）。

vue3实际开发场景总结

生命周期	典型操作
setup()	定义数据/方法、组合逻辑（替代 Vue2 的 created）
onMounted	初始化第三方库、操作 DOM、添加全局事件
onUpdated	同步第三方库状态、基于新 DOM 操作
onBeforeUnmount	清理定时器、解绑事件、释放资源（防止内存泄漏）
onErrorCaptured	统一错误处理（如上报日志、展示错误页面）

vue3完整生命周期表

Options API	Composition API	触发时机
beforeCreate	无（由 setup() 替代）	组件初始化前（数据/方法未生成）
created	无（由 setup() 替代）	组件初始化后（数据/方法已生成）
beforeMount	onBeforeMount	DOM 挂载前
mounted	onMounted	DOM 挂载后
beforeUpdate	onBeforeUpdate	数据变化后，DOM 更新前
updated	onUpdated	DOM 更新后
beforeUnmount	onBeforeUnmount	组件销毁前
unmounted	onUnmounted	组件销毁后
errorCaptured	onErrorCaptured	子组件抛出错误时
新增调试钩子	onRenderTracked	响应式依赖被追踪时（调试用）
	onRenderTriggered	响应式依赖触发更新时（调试用）

注意事项🚧

• 优先使用 Composition API：更灵活地组织代码逻辑。
• 避免在 onUpdated 中修改状态：可能导致无限更新循环。
• 资源清理应在 onBeforeUnmount 完成：onUnmounted 阶段可能已无法访问组件实例。

最后上一张图方便理解

完整的vue3生命周期

这张表是官方给出的，并未做详细注解，大家记得先收藏，我会在后续更新有注解的图方便大家理解

---

总结

注意：这里简述vue2和vue3在生命周期上的差异总结，详细的vue2对比需要到vue2篇中详细查看
点击前往👉【高频面试-vue生命周期：vue2篇】

阶段	Vue2 钩子	Vue3 钩子	关键变化
初始化	beforeCreate	❌（由 setup 替代）	Vue3 的 setup() 在 beforeCreate 前执行，替代了 beforeCreate 和 created 的功能。
初始化完成	created	❌（由 setup 替代）	数据响应式在 setup 中初始化。
挂载前	beforeMount	beforeMount	保持同名，但可通过 onBeforeMount 在 setup 中使用。
挂载完成	mounted	mounted	保持同名，但通过 onMounted 在 setup 中注册。
更新前	beforeUpdate	beforeUpdate	保持同名，通过 onBeforeUpdate 注册。
更新完成	updated	updated	保持同名，通过 onUpdated 注册。
销毁前	beforeDestroy	beforeUnmount	重命名，更贴合“卸载”行为。

关键记忆点（面试重点）：

命名变化：

• beforeDestroy → beforeUnmount
• destroyed → unmounted（强调“卸载”而非“销毁”）。

Composition API：

• Vue3 通过 onXxx 函数（如 onMounted）在 setup 中注册生命周期。 set
• up 替代了 beforeCreate 和 created，直接在此初始化逻辑。

执行顺序：

• setup() 执行时机早于 beforeCreate，created 逻辑需写在 setup 中。

下一期预告：
讲到了vue3不可避免要讲 语法糖和和组合式API，敬请关注我哦~

咱们这是一个系列，等到要用时，为了快速方便的寻找🔎，
大家记得点赞❤、收藏⭐、关注哦💓~