生命周期 数据请求如何在 onMounted 钩子中优雅发起首次异步数据请求

onMounted 是 Vue 3 首次数据请求的合理时机，但需封装为组合式函数（如 usePosts）以保障可维护性、可测试性与错误处理；避免直接在 onMounted 中写 async/await；SSR 场景需配合 onServerPrefetch 或 asyncData。

在 Vue 3 的 Composition API 中，onMounted 是发起首次数据请求的合理时机——此时组件已挂载、DOM 可访问，且避免了服务端渲染（SSR）中 onMounted 不执行的问题（需配合 onServerPrefetch 或服务端预取逻辑）。但“优雅”不仅指能发请求，更在于可维护、可测试、有错误处理、不阻塞渲染，且与响应式系统协同良好。

✅ 推荐方式：组合式函数封装 + onMounted 调用

把请求逻辑抽离为可复用的组合式函数（如 usePosts），内部管理 loading、error、data 状态，并暴露触发方法。在组件中只负责调用：

1. 组件内无需手动声明 ref，状态和副作用被封装，逻辑更聚焦
2. 便于单元测试（可单独调用组合函数并 mock fetch）
3. 支持后续手动刷新（如按钮点击重新拉取）

示例：

// composables/usePosts.jsimport { ref, onMounted } from 'vue'import { fetchPosts } from '@/api'export function usePosts() {const posts = ref([])const loading = ref(false)const error = ref(null)const load = async () => {loading.value = trueerror.value = nulltry {posts.value = await fetchPosts()} catch (e) {error.value = e} finally {loading.value = false}}return {posts,loading,error,load}}// 在组件中import { onMounted } from 'vue'import { usePosts } from '@/composables/usePosts'export default {setup() {const { posts, loading, error, load } = usePosts()onMounted(() => {load() // 首次加载})return { posts, loading, error }}}

⚠️ 注意：避免在 onMounted 中直接写异步逻辑

不推荐在 onMounted(async () => {...}) 内直接写 await fetch()，原因如下：

1. onMounted 本身不等待 Promise，无法捕获或响应请求完成后的副作用（比如更新 ref 后的 DOM 更新时机不可控）
2. 错误会被静默吞掉，不利于调试
3. 难以复用、难测试、耦合度高

? 补充建议：结合 Suspense（可选）

若使用 Vue 3.1+，且项目支持 <Suspense>，可让父组件用 async setup 直接 await 请求，实现更简洁的首屏加载体验（但注意 SSR 兼容性）：

// PostList.vue（支持 Suspense 的子组件）export default {async setup() {const posts = await fetchPosts() // ⚠️ 仅适用于客户端 + Suspense 包裹场景return { posts }}}

父组件用：

<template><Suspense><template #default><PostList /></template><template #fallback><LoadingSpinner /></template></Suspense></template>

? 进阶：处理 SSR 场景下的首次请求

若应用启用 SSR，onMounted 在服务端不会执行，首次数据需在服务端预取并注入到客户端。此时应：

1. 在 setup 中调用请求（非 onMounted），并配合 onServerPrefetch 做服务端预取
2. 或使用 Nuxt 3 / Vue Router 的 asyncData / useAsyncData 等方案统一处理
3. 避免依赖客户端专属 API（如 localStorage、window）导致 SSR 报错

不复杂但容易忽略：优雅的核心是分层——请求逻辑归组合式函数，生命周期归组件协调，状态归响应式系统。这样既清晰又稳健。