在 Vue 中，created 和 mounted 都是常用的生命周期钩子，都可以用来发起数据请求，但它们在执行时机和适用场景上存在关键区别。
1. 执行时机
created钩子：- 在实例创建完成后立即调用。
- 此时，Vue 实例已经完成了数据观测 (data observer)、属性和方法的运算、
watch/event事件回调的配置。 - 但是，$el (挂载的 DOM 元素) 还没有被创建，页面上的 DOM 节点尚未生成。
mounted钩子：- 在实例被挂载到 DOM 之后调用。
- 此时，
vm.$el已经被创建并替换掉了el选项所指向的 DOM 元素。 - 页面上的 DOM 节点已经真实存在，可以进行 DOM 操作。
2. 在哪个钩子请求数据的区别
| 特性 | 在 created 中请求数据 | 在 mounted 中请求数据 |
|---|---|---|
| 数据获取时机 | 更早。实例一创建就发起请求，能更快地获取数据。 | 稍晚。需要等待模板挂载完成才发起请求。 |
| 对首屏渲染的影响 | ✅ 推荐。数据获取与 DOM 渲染可以并行。获取到数据后，视图可以立即更新。 | ⚠️ 不推荐（对首屏）。请求被延迟到 DOM 挂载后，增加了用户等待时间。 |
| 能否操作 DOM | ❌ 不能。此时 DOM 尚未生成，无法访问 this.$el 或使用 document.querySelector。 | ✅ 可以。DOM 已经存在，可以安全地进行 DOM 操作。 |
| SSR (服务端渲染) 支持 | ✅ 支持。created 在服务端和客户端都会执行，适合 SSR 数据预取。 | ❌ 不支持。mounted 只在客户端执行，服务端渲染时不会调用。 |
3. 实际应用建议
- 绝大多数情况下，应该在
created钩子中请求数据。- 原因：这样做可以让数据请求尽早开始，与视图的首次渲染并行进行。一旦数据返回，视图就能立即更新，从而缩短用户看到最终内容的等待时间，提升用户体验。
- 示例：加载用户信息、文章列表、商品详情等首屏核心数据。
- 在
mounted钩子中请求数据的场景：- 需要依赖 DOM 的数据请求：例如，请求的数据需要根据某个 DOM 元素的尺寸、位置或内容来决定。
- 第三方库初始化：某些需要操作 DOM 的第三方库（如图表库、地图）的初始化代码和数据请求放在
mounted中更安全。 - 非首屏关键数据：一些不影响首屏渲染的次要数据或“懒加载”内容。
总结
| 对比项 | created | mounted |
|---|---|---|
| 执行时间 | 早 (实例创建后) | 晚 (DOM 挂载后) |
| DOM 状态 | 未生成 | 已生成 |
| 数据请求时机 | 早，推荐 | 晚，不推荐（首屏） |
| 适合场景 | 首屏核心数据 | 依赖 DOM 或非关键数据 |
核心结论：为了优化性能和用户体验，应该优先在 created 钩子中发起数据请求。只有在确实需要操作 DOM 才能决定如何请求数据时，才考虑使用 mounted。
THE END
