【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()

使用场景：

• 清除定时器（clearIn