Vue生命周期中created和mounted哪个更适合发请求？深度对比

Vue生命周期中created和mounted哪个更适合发请求？深度对比

开门见山地说，在大多数场景下，created 钩子更适合用来发起请求。这背后的原因，并非它是什么“更高级”的选择，而是它的执行时机和具备的能力，恰好精准匹配了数据获取的普遍需求——响应式系统已经准备就绪，DOM的干扰尚未介入，请求可以尽早出发。

created 发请求的核心优势

当代码执行到 created 阶段时，组件的实例已经创建完毕。这意味着什么？data、methods、computed、props 这些你熟悉的选项全部可用，更重要的是，Vue 的响应式系统已经启动。你在这里获取到的数据，一旦返回，就会自动触发视图更新，整个过程无需等待页面渲染完成。

• 并行加速：请求的发出和 DOM 的渲染可以同时进行，有效缩短用户面对白屏的等待时间。
• SSR 友好：在服务端渲染中，created 钩子会被执行，而 mounted 不会。将核心数据请求放在 created，能确保首屏内容的一致性。
• 规避报错：此时不依赖 this.$el 或 refs，完美避免了因 DOM 未挂载而导致的“undefined”错误或逻辑中断。
• 经典场景：用户信息、商品列表、全局配置、权限菜单……这些纯粹由数据驱动的初始化内容，放在 created 里再合适不过。

created更适合发请求，因其在响应式系统就绪而DOM未挂载时执行，可并行渲染、支持SSR且避免ref报错；mounted适用于需DOM信息的场景，如尺寸适配、视口检测或第三方库初始化。

mounted 发请求的不可替代场景

那么，mounted 钩子的价值在哪里？它的关键不在于“能不能”发请求，而在于“必须等 DOM 就位后才能决定发什么、怎么发”。它解决的是那些与视图紧密相关的适配性问题。

• 视觉适配：需要先读取容器的宽度或高度，再请求对应尺寸的图片（比如响应式图片的 srcset，或 CDN 的动态缩略图功能）。
• 曝光触发：根据元素是否滚动进入视口，先完成曝光埋点，再触发后续资源的加载。
• 库依赖：某些第三方库（例如 ECharts）必须在其实例初始化完成后，才能调用 API 获取图表数据。
• 动态内容：Modal 弹窗或抽屉组件，需要等待其动画结束、布局稳定后，再拉取内部的具体内容。

常见误用与风险提醒

在实际开发中，一些看似“保险”的做法，反而会埋下隐患。例如，在两个钩子里都发起同一个接口请求：

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

• 重复请求：造成不必要的服务器压力，更糟糕的是，后到的响应可能会覆盖前序结果，导致页面状态混乱。
• 时机错判：在 created 中 await 等待请求返回后，立即操作 this.$refs.xxx —— 此时 ref 根本还不存在，必然报错。
• 路由复用陷阱：当路由参数变化但组件被复用时（如从 /user/1 跳转到 /user/2），created 不会再次触发。如果数据请求只依赖它，新参数将无法触发新的数据获取。
• SEO 风险：对搜索引擎优化敏感的页面，若将关键数据请求放在 mounted，爬虫可能无法捕获这些内容，从而影响页面收录和排名。

实际项目中的协作思路

面对复杂的真实页面，我们往往不是做简单的二选一，而是进行分层、协作式的处理：

• created 担当主力：负责获取文章详情、评论总数、作者信息等页面主体数据。
• mounted 查漏补缺：检查 DOM 状态——图片容器是否加载失败？是否需要回退到备用尺寸？是否要补发懒加载的条目？
• 配合路由守卫：使用 watch 监听 $route 变化，或利用 beforeRouteUpdate 导航守卫，来响应路由参数的变化，弥补生命周期在某些场景下的“失灵”。
• 组合式 API 的精细控制：在 Vue 3 的 Composition API 中，可以运用 onMounted 与 watchEffect 等组合，实现更精细的依赖追踪和副作用触发控制。