created钩子最适合初始化数据请求，因其在响应式系统就绪后立即执行、不依赖DOM、可并行发起请求减少白屏，且兼容SSR；仅当请求明确依赖DOM状态时才用mounted。
初始化数据请求放在 created 钩子中最合适。它在响应式系统就绪后立即执行，不依赖 DOM，能最快发起请求、减少白屏等待，也兼容服务端渲染（SSR）。
为什么 created 是首选？
created 阶段已完成 data 初始化、watch/event 配置和 computed 解析，但尚未挂载 DOM。这意味着：
- 可以安全访问 this.data、this.methods、this.$http 或其他请求工具
- 无需等待页面渲染，请求可与组件初始化并行启动
- 避免 mounted 中发请求导致的“先空渲染、再更新”闪烁问题
- SSR 场景下，beforeMount 和 mounted 不会执行，只有 created 可靠运行
什么情况下考虑用 mounted？
仅当请求逻辑明确依赖 DOM 状态时才移至 mounted，例如：
- 根据容器实际宽高决定加载哪一档图片资源
- 需读取某个 ref 元素的 offsetHeight 后再请求适配数据
- 集成依赖 DOM 就绪的第三方库（如某些图表插件初始化后才暴露 API）
注意：这类请求本质是“DOM 驱动”，而非“数据初始化”，应与主数据流分离处理。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
立即学习“前端免费学习笔记（深入）”；
哪些地方绝对不能放请求？
以下位置存在明显风险，应避开：
- data() 函数内：this 尚未完成注入，访问 inject 或调用 methods 会报 undefined
- props default 函数中直接调用 this.xxx：部分 Vue 版本中 inject 可能未就绪（虽 Vue 2.2.1+ 已优化，但仍建议回避）
- beforeCreate：data、methods、computed 均不可用，无法发起任何有效请求
- beforeMount：虽可发请求，但无实质优势，且易与模板编译逻辑混淆，不推荐作为常规选择
一个稳妥的实践模式
对多数业务组件，推荐统一使用 created + loading 状态管理：
- 在 created 中调用 fetchList() 或类似方法
- data 中声明 loading: false，请求开始设为 true，结束设为 false
- 模板中用 v-if="!loading" 控制内容显示，配合骨架屏提升体验
- 错误处理统一在请求回调中捕获，避免进入 updated 死循环
这样既保持逻辑清晰，又兼顾性能、可维护性与 SSR 兼容性。
