面试题：通常在 Vue 的哪个生命周期钩子中请求异步数据？为什么？

通常在 created 钩子中请求异步数据。

为什么选择 created 钩子？

1. 时机恰当：
   • created 钩子在组件实例被创建后立即执行。此时，组件的 data、methods、computed 等选项已经被处理，数据已经响应式化，你可以安全地访问这些数据和方法。
   • 这是最早可以访问到组件数据和方法的生命周期钩子之一。
2. 尽早发起请求：
   • 在 created 钩子中发起网络请求，可以尽早开始获取数据，减少用户等待时间。数据获取和组件挂载（DOM 渲染）可以并行进行，从而优化整体加载性能。
3. 无需等待 DOM：
   • 请求数据是一个异步操作，不依赖于 DOM 的存在。在 created 钩子中发起请求时，DOM 还未生成（$el 为 undefined），但这并不影响数据请求本身。

---

为什么不选择 mounted 钩子？

虽然在 mounted 钩子中请求数据也是可行的，并且有时也会这样做，但 created 通常是更好的选择，原因如下：

• 延迟：mounted 钩子在组件挂载到 DOM 之后才执行。这意味着你需要先等待模板编译、虚拟 DOM 生成、真实 DOM 插入等一系列操作完成，数据请求的发起时间被推迟了。
• 性能考量：对于需要从服务器获取数据才能渲染的组件，延迟发起请求会增加用户看到内容的等待时间。

---

什么情况下会在 mounted 中请求数据？

尽管 created 是首选，但在以下场景中，你可能会选择在 mounted 中请求数据：

1. 需要 DOM 信息：如果请求的参数依赖于 DOM 元素的几何信息（如宽度、高度、位置），那么必须等到 mounted 钩子，因为此时 DOM 已经存在。
2. 初始化依赖 DOM 的库：有时，你需要先初始化一个依赖 DOM 的第三方库（如图表库），然后基于该库的状态发起请求。这种情况下，逻辑自然放在 mounted。

---

总结

钩子	是否推荐用于请求数据	原因
created	✅ 推荐	时机早，数据和方法已就绪，可尽早发起请求，提升性能。
mounted	⚠️ 可选	适用于请求依赖于 DOM 信息的场景。否则会延迟请求发起时间。

最佳实践：对于绝大多数与 DOM 无关的异步数据请求（如获取用户信息、文章列表等），应优先在 created 钩子中发起。这样可以最大限度地利用网络请求的并行性，优化用户体验。