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-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章