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

---

前言

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

---

vue2 的生命周期有哪些？

因为vue存在很多的钩子，所以咱们在这里主要谈最主要的几个，也就是组件的四个阶段：创建阶段、挂载阶段、更新阶段、销毁阶段

1.组件创建时（创建阶段）

beforeCreate() 创建前

• 调用时机：
  组件刚初始化，数据 (data)、方法 (methods) 都 还未生成。

• 实际用途：
  几乎 不会使用（此时拿不到数据和事件）。
  极端场景：在插件中提前注入逻辑（如 Vue Router 的导航守卫初始化）。

created（）创建完成

• 调用时机：数据 (data) 和方法 (methods) 已生成，但 DOM 还未挂载。

• 实际用途：
  初始化数据（如从后端接口获取数据）。
  绑定自定义事件（如 EventBus 监听）。

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

beforeMount() 挂载前

• 调用时机：
  模板已编译成虚拟 DOM，但 还未渲染到真实页面。
• 实际用途：
  极少使用（此时操作 DOM 会无效）。
  极端场景：在渲染前最后一次修改数据（如根据环境变量动态配置）。

mounted()挂载完成

• 调用时机：
  DOM 已挂载到页面，可以访问真实 DOM 元素。
• 实际用途：
  操作 DOM（如初始化图表库 ECharts）。
  发起依赖 DOM 的请求（如获取元素尺寸）。
  添加全局事件监听（如 window.resize）

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

beforeUpdate()更新前

• 调用时机：
  数据已变化，但 DOM 还未重新渲染。
• 实际用途：
  获取更新前的 DOM 状态（如记录滚动位置）。
  手动移除旧的 DOM 事件（防止内存泄漏）。

Updated（）更新完成

• 调用时机：
  DOM 已重新渲染完成。
• 实际用途：
  作更新后的 DOM（如滚动到最新消息）。
  与第三方库同步数据（如更新 ECharts 图表）。
  ⚠️ 避免在此处直接修改数据（可能引发无限循环）！

4. 元素销毁（销毁阶段）

beforeDestroy() 销毁前

• 调用时机：
  组件 即将被销毁，但功能仍正常。
• 实际用途：
  清理定时器（clearInterval）。
  取消事件监听（如 EventBus.off）。
  释放非 Vue 资源（如销毁 ECharts 实例）。

destroyed()销毁后

• 调用时机：
  组件已销毁，所有子实例也被销毁。
• 实际用途：
  几乎不用（此时所有数据和方法已不可用）。
  极端场景：记录组件销毁日志。

vue2实际开发场景总结

生命周期	典型操作
created()	调接口初始化数据、绑定全局事件
mounted()	操作 DOM、初始化第三方库（地图/图表）
beforeUpdate	记录更新前状态（如滚动位置）
updated()	更新第三方库、同步 DOM 变化
beforeDestroy-	-清除定时器、解绑全局事件、释放外部资源

注意事项
避免在 updated 中修改数据 → 可能导致死循环！
操作 DOM 必须在 mounted 之后 → created 阶段 DOM 还不存在！
资源清理要在 beforeDestroy 完成 → destroyed 阶段为时已晚！

最后上一张图方便理解

完整的vue2生命周期

---

总结

注意：只写了一半，另一半三连等我更新