【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 APIComposition API触发时机beforeCreate无（由 setup() 替换）组件初始化前（数据/方法未天生）created无（由 setup() 替换）组件初始化后（数据/方法已天生）beforeMountonBeforeMountDOM 挂载前mountedonMountedDOM 挂载后beforeUpdateonBeforeUpdate数据厘革后，DOM 更新前updatedonUpdatedDOM 更新后beforeUnmountonBeforeUnmount组件销毁前unmountedonUnmounted组件销毁后errorCapturedonErrorCaptured子组件抛出错误时新增调试钩子onRenderTracked响应式依靠被追踪时（调试用）onRenderTriggered响应式依靠触发更新时（调试用） 留意事项