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

时间：2026-08-21 07:05

在Vue 3中，onMounted是进行首次数据请求的一个合适时机。不过，为了提升代码的可维护性、可测试性以及更好地处理错误，建议将其封装成组合式函数，比如usePosts。要注意避免在onMounted中直接使用async await。如果是在SSR场景下，需要配合onServerPrefetch

在Vue 3中，onMounted是进行首次数据请求的一个合适时机。不过，为了提升代码的可维护性、可测试性以及更好地处理错误，建议将其封装成组合式函数，比如usePosts。要注意避免在onMounted中直接使用async/await。如果是在SSR场景下，需要配合onServerPrefetch或者asyncData来实现。

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

在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+，且项目支持，可让父组件用 async setup 直接 await 请求，实现更简洁的首屏加载体验（但注意 SSR 兼容性）：

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

父组件用：