onMounted 是 Vue 3 首次数据请求的合理时机，但需封装为组合式函数（如 usePosts）以保障可维护性、可测试性与错误处理；避免直接在 onMounted 中写 async/await；SSR 场景需配合 onServerPrefetch 或 asyncData。
在 Vue 3 的 Composition API 中，onMounted 是发起首次数据请求的合理时机——此时组件已挂载、DOM 可访问，且避免了服务端渲染（SSR）中 onMounted 不执行的问题（需配合 onServerPrefetch 或服务端预取逻辑）。但“优雅”不仅指能发请求，更在于可维护、可测试、有错误处理、不阻塞渲染，且与响应式系统协同良好。
✅ 推荐方式：组合式函数封装 + onMounted 调用
把请求逻辑抽离为可复用的组合式函数（如 usePosts），内部管理 loading、error、data 状态，并暴露触发方法。在组件中只负责调用：
- 组件内无需手动声明 ref，状态和副作用被封装，逻辑更聚焦
- 便于单元测试（可单独调用组合函数并 mock fetch）
- 支持后续手动刷新（如按钮点击重新拉取）
示例：
// composables/usePosts.js
import { 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 = true
error.value = null
try {
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()，原因如下：
-
onMounted本身不等待 Promise，无法捕获或响应请求完成后的副作用（比如更新 ref 后的 DOM 更新时机不可控） - 错误会被静默吞掉，不利于调试
- 难以复用、难测试、耦合度高
? 补充建议：结合 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 在服务端不会执行，首次数据需在服务端预取并注入到客户端。此时应：
- 在
setup中调用请求（非 onMounted），并配合onServerPrefetch做服务端预取 - 或使用 Nuxt 3 / Vue Router 的
asyncData/useAsyncData等方案统一处理 - 避免依赖客户端专属 API（如 localStorage、window）导致 SSR 报错
不复杂但容易忽略：优雅的核心是分层——请求逻辑归组合式函数，生命周期归组件协调，状态归响应式系统。这样既清晰又稳健。
