一、什么是 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：缓存组件被停用时调用
三、createdvsmounted：请求数据的区别
这是面试高频考点！核心区别在于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 发请求”。
✅参考文献
- 掘金：Vue 生命周期详解
- Vue.js 官方文档
- 百度百科：生命周期概念
