成都网站建设吧衡水哪儿做wap网站
文章目录
- 前言
- vue2 的生命周期有哪些？
- 1.组件创建时（创建阶段）
- 2. 组件被挂载时（挂载阶段）
- 3. 数据更新时（更新阶段）
- 4. 元素销毁（销毁阶段）
- vue2实际开发场景总结
- 完整的vue2生命周期
- 总结
前言
提示：系列文章并未做很详细的讲解，旨在快速了解和复习前端的高频面试考点，所以并未做详细展开，只讲干货！！！
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生命周期
总结
注意：只写了一半，另一半三连等我更新