【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生命周期
https://i-blog.csdnimg.cn/direct/404e04d95c0944a28f5410f4bc48498e.png
总结
留意：只写了一半，另一半三连等我更新
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]