不推荐在生命周期钩子中直接使用 async/await，因为 Vue 将其视为同步函数，遇到 await 会立即返回 Promise，导致后续逻辑跳过、this 失效或内存泄漏；created 和 beforeMount 风险最高，setup（Vue 3.4+）和 onMounted（需存活检查）相对安全。
可以写成异步函数，但不推荐在生命周期钩子中直接使用 async/await——因为 Vue 不会等待你写的 async 钩子执行完成，它把钩子当作同步函数调用，遇到 await 就立即返回 Promise，后续逻辑可能被跳过或引发未定义行为。
为什么 async 钩子看似能跑，实则危险？
Vue 的生命周期钩子（如 created、mounted）是同步触发的。当你写 async created() { await fetchData() }，实际等价于：
- Vue 调用该函数，函数立刻返回一个 pending Promise
- Vue 不关心这个 Promise，继续执行后续初始化（比如渲染、watch 建立、provide/inject 等）
- await 后的代码（如 this.data = res）可能在组件已挂载甚至已销毁后才执行
- 若组件提前卸载，this 可能已失效，导致 Cannot set property of undefined 或内存泄漏
哪些钩子“勉强可用”？哪些绝对不行？
created 和 beforeMount 是最常误用 async 的地方，风险最高；setup（Composition API）中可安全 await，但需配合 onMounted 等显式时机。
- setup()：本身支持顶层 await（Vue 3.4+），且会在 resolve 后才进入模板编译，相对安全
- onMounted(() => { ... })：回调内可 async，但必须手动处理组件存活状态（如用 onBeforeUnmount 清理 pending 请求）
- beforeUnmount / unmounted：不能 async——卸载流程必须同步完成，否则 Vue 无法正确清理实例
正确实现异步初始化的 3 种推荐方式
- 在钩子里启动 Promise，用 .then 或 async/await + 组件存活检查：例如在 created 中调用 fetch，并在 then 中判断 this?._isBeingDestroyed !== true 再更新数据
-
用 provide / inject + 异步 setup（推荐 Vue 3.4+）：将异步逻辑抽到可组合函数中，用
defineAsyncComponent或 suspense 包裹依赖异步数据的子组件 - 服务端预取（SSR 场景）：在 serverPrefetch（Vue 2）或 useAsyncData（Nuxt/VueUse）中统一管理，避免客户端重复触发
一个典型翻车现场：mounted 里 await init() 导致 this 失效
假设你在 mounted 中写了：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
async mounted() {
const data = await api.getUser()
this.user = data // ❌ 若用户快速跳转，this 可能已是 null
}
更稳妥的写法是：
mounted() {
this.loading = true
api.getUser().then(data => {
if (!this?.$el) return // 组件已卸载
this.user = data
}).finally(() => this.loading = false)
}
或者用 VueUse 的 useAsyncState 自动绑定组件生命周期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
