一、什么是 Vue 生命周期？
Vue 生命周期指的是 一个组件实例从创建到销毁的全过程 。在这个过程中，Vue 会自动执行一系列初始化操作（如数据观测、模板编译、DOM 挂载等），并在特定阶段触发生命周期钩子函数，允许开发者在这些时机插入自定义逻辑。
就像一条流水线：每个"工人"（钩子）在任务流经自己岗位时执行特定工作。
⚠️ 注意：所有生命周期钩子的this都自动绑定到当前 Vue 实例，因此不能使用箭头函数 （否则this会指向外层作用域）。
二、Vue 的 8 个核心生命周期钩子
| 钩子 | 触发时机 | 典型用途 |
|---|---|---|
beforeCreate |
实例刚被创建，data、methods 等尚未初始化 |
插件开发中做极早期初始化 |
created |
实例已完成数据观测、属性/方法初始化，但 DOM 未生成 | 发起异步请求、初始化非 DOM 相关逻辑 |
beforeMount |
模板已编译为 render 函数，虚拟 DOM 已创建，真实 DOM 未挂载 | 可访问 $el（原始挂载点），但内容未替换 |
mounted |
真实 DOM 已挂载并渲染完成 | 操作 DOM、初始化第三方库（如 echarts）、获取元素尺寸 |
beforeUpdate |
数据变化后，虚拟 DOM 重新渲染前 | 获取更新前的状态 |
updated |
虚拟 DOM 重新渲染并真实 DOM 更新后 | 执行依赖 DOM 更新后的操作（慎用，避免无限循环） |
beforeDestroy |
实例销毁前，仍可访问所有属性和方法 | 清理定时器、取消订阅、解绑事件 |
destroyed |
实例完全销毁，仅保留 DOM 节点（不会自动移除） | 彻底释放资源 |
📌 补充（带
keep-alive时）：
activated：缓存组件被激活时调用deactivated：缓存组件被停用时调用
三、created vs mounted：请求数据的区别
这是面试高频考点！核心区别在于 DOM 是否就绪。
✅ 相同点：
- 都能访问
this、data、methods、computed等； - 都可以发起 AJAX 请求获取数据。
❗ 关键区别：
| 维度 | created |
mounted |
|---|---|---|
| 触发时机 | 实例创建完成，早于 DOM 渲染 | DOM 已挂载并渲染完成 |
| 能否操作 DOM | ❌ 不能（$el 为原始挂载点或 undefined） |
✅ 可以（$el 是最终渲染的 DOM） |
| 用户体验 | 数据在页面渲染前加载，无闪动 | 若数据较慢，可能先看到空白/默认 UI，再更新 → 可能出现"闪屏" |
| 适用场景 | 推荐用于大多数数据请求（尤其不影响 DOM 结构的数据） | 适用于必须等 DOM 存在才能发起的请求（极少见），或需结合 DOM 尺寸计算的场景 |
🎯 最佳实践建议：
- 优先在
created中请求数据 ：
因为它更早执行，能让数据在页面渲染前就位，避免用户看到"加载中"或空白状态。 - 除非你需要 DOM 信息 （比如根据容器宽高请求不同尺寸的图片），否则不要等到
mounted再发请求。
💡 举例：
如果你在
mounted中请求用户信息，而模板中有{``{ userInfo.name }}，那么页面会先显示空值（或默认值），等请求回来才更新------这就是"闪动"。而在
created中请求，配合v-if="userInfo"，就能实现"数据准备好才渲染"，体验更流畅。
四、总结
- Vue 生命周期是理解组件行为的核心，每个钩子都有其明确职责；
created是数据准备的最佳时机 ，mounted是DOM 操作的安全时机；- 数据请求应尽量前置到
created，以提升首屏体验，避免不必要的 UI 闪烁。
这也是为什么 Vue 官方文档和社区普遍推荐："能用 created，就不用 mounted 发请求"。
✅ 参考文献