created更适合发数据获取类请求，因响应式系统已初始化且不依赖DOM；mounted适合依赖DOM的请求，如根据尺寸动态加载图片或集成第三方库。

在 Vue 生命周期中，created 更适合发请求，但 mounted 有其不可替代的适用场景。关键不在于“哪个更好”，而在于“请求的目的和依赖条件是什么”。

created：适合绝大多数数据获取类请求

组件实例创建完成、响应式系统已初始化，但 DOM 尚未挂载。此时可安全访问 data、computed、methods 和 props，也能调用 API 获取初始数据。

• 无需操作 DOM，纯数据驱动（如列表页拉取商品数据、用户信息）
• 服务端渲染（SSR）友好：mounted 在 SSR 中不会执行，而 created 会，保证首屏数据一致性
• 能提前发起请求，缩短白屏时间（请求与 DOM 渲染并行）
• 避免因 DOM 未就绪导致的逻辑耦合（比如不依赖 ref 或元素尺寸）

mounted：适合依赖 DOM 的请求或副作用操作

DOM 已挂载，可安全访问 this.$el、ref 元素、计算样式、滚动位置等。此时发请求通常不是为了“拿数据”，而是为了“适配视图”。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 需根据容器尺寸动态请求图片资源（如响应式图床 URL）
• 基于 DOM 节点位置做埋点上报（如“模块进入视口时上报曝光”）
• 集成第三方 DOM 依赖库（如地图 SDK、图表库初始化后触发数据加载）
• 需要等待父组件完成布局后再请求（如 Modal 内部内容需等弹窗动画结束）

常见误区与注意事项

看似简单，实则容易踩坑：

立即学习“前端免费学习笔记（深入）”；

• 不要在 mounted 中重复发 created 已发过的请求——易造成冗余请求、状态覆盖或竞态问题
• 使用 async/await 时，created 中不能直接 await 请求后操作 DOM（因为 DOM 还没挂载），但可以 await 后赋值 data，再由模板响应式更新
• 若请求结果影响 DOM 结构（如控制某个 v-if 区域是否显示），created + v-if 完全够用；无需等到 mounted
• 路由复用组件时（如 from /user/1 → /user/2），created 不会再次触发，应改用 watch: $route 或 beforeRouteUpdate

进阶建议：按场景组合使用

复杂业务中，两者常协同工作：

• created 发主体数据请求（如文章详情）
• mounted 中检查是否需要补发（如发现图片加载失败，再按实际 offsetWidth 请求适配尺寸的缩略图）
• 结合 onMounted / onCreated（Composition API）+ watchEffect 实现更细粒度控制
• 对 SEO 敏感页面，优先确保 created 中完成关键数据请求，避免 mounted 延迟首屏内容渲染