推荐在 vue 3 中使用 onmounted 钩子发起初始化网络请求，因其确保组件已挂载、dom 可访问且响应式状态就绪；setup 中不可直接 await，onmounted 回调内需用 async iife 或普通函数调用异步逻辑。
在 Vue 3 中，推荐使用 onMounted 钩子发起初始化网络请求，因为它确保组件已挂载到 DOM、DOM 元素可访问，且响应式状态已就绪。相比 created（Vue 2 常用），onMounted 更安全——尤其当请求结果用于操作 DOM（如聚焦输入框、计算元素尺寸）或依赖模板渲染逻辑时。
为什么选 onMounted 而不是 setup 或 onCreated？
setup 函数本身不是生命周期钩子，它在组件实例创建时同步执行，此时 DOM 尚未生成，无法访问 ref 绑定的元素，也不适合直接发请求（除非你明确不需要 DOM）。 Vue 3 没有 onCreated，对应的是 onBeforeMount 或直接在 setup 中调用逻辑 —— 但此时模板还未挂载，若请求数据用于 v-if 控制的 DOM 或需 ref 访问节点，会出问题。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
onMounted是首个能安全访问真实 DOM + 响应式数据 + 模板结构的时机 - 避免在
setup顶层直接 await（会导致组件异步 setup，不被 Vue 官方支持） - 若请求纯为获取数据、不依赖 DOM，也可在
onBeforeMount中发，但onMounted更统一、更易理解
正确写法：在 setup 中使用 onMounted + async/await
注意：onMounted 回调函数不能直接是 async，否则会返回 Promise，破坏钩子机制。正确做法是在回调内用 async IIFE 或普通函数中调用异步逻辑：
import { ref, onMounted } from 'vue'
import { fetchUser } from '@/api/user'
export default {
setup() {
const user = ref(null)
const loading = ref(true)
onMounted(async () => {
try {
const data = await fetchUser()
user.value = data
} catch (err) {
console.error('加载用户失败:', err)
} finally {
loading.value = false
}
})
return { user, loading }
}
}
常见注意事项
-
不要在 onMounted 外层直接 await：比如
onMounted(async () => {...})是允许的，但await onMounted(...)会报错 -
组件卸载前取消请求（可选但推荐）：配合
AbortController避免内存泄漏或状态更新到已销毁组件，尤其在页面跳转快、请求慢时 -
服务端渲染（SSR）场景下，onMounted 不会在服务端执行，所以初始化请求天然只在客户端运行，无需额外判断
process.client - 如果使用
defineComponent+defineAsyncComponent或路由懒加载，onMounted依然可靠，它属于当前组件实例的生命周期
替代方案：组合式 API 中封装成自定义 Hook
当多个组件都需要类似「挂载即请求」逻辑时，可抽象为 useFetchOnMount：
import { ref, onMounted } from 'vue'
export function useFetchOnMount(fetcher) {
const data = ref(null)
const error = ref(null)
const loading = ref(false)
onMounted(async () => {
loading.value = true
try {
data.value = await fetcher()
} catch (e) {
error.value = e
} finally {
loading.value = false
}
})
return { data, error, loading }
}
// 在组件中使用
// const { data, error, loading } = useFetchOnMount(() => api.getPosts())前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
