请描述下你对 Vue 生命周期的理解？在 `created` 和 `mounted` 中请求数据有什么区别？

一、什么是 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 官方文档
• 百度百科：生命周期概念

---