【2025前端高频面试题——系列三之vue生命周期：vue3】
文章目录
- 前言
- vue3 的生命周期有哪些？
- 1.组件创建时（初始化阶段）
- 2. 组件被挂载时（挂载阶段）
- 3. 数据更新时（更新阶段）
- 4. 组件卸载（卸载阶段）
- vue3实际开发场景总结
- vue3完整生命周期表
- 完整的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，敬请关注我哦~
咱们这是一个系列，等到要用时，为了快速方便的寻找🔎，
大家记得点赞❤、收藏⭐、关注哦💓~
