JavaScript 中 async/await 怎么在 Vue 生命周期钩子中调用-js教程-PHP中文网

不能直接用 async mounted，因为 vue 生命周期钩子设计为同步执行并返回 undefined，若声明为 async 会返回 promise，而 vue 不会 await 它，导致渲染提前、数据未就绪等问题。

javascript 中 async/await 怎么在 vue 生命周期钩子中调用

在 Vue 生命周期钩子中直接使用 async/await 是不允许的，因为 Vue 的生命周期钩子（如 mounted、created）本身不支持异步函数签名——它们被设计为同步执行的回调。如果你写成 async mounted() { ... }，虽然语法上不会报错，但 Vue 无法正确处理返回的 Promise，可能导致副作用未等待完成就继续执行后续逻辑（比如组件渲染提前结束、依赖数据未就绪等）。

为什么不能直接用 async mounted？

Vue 2 和 Vue 3 的生命周期钩子都期望函数立即执行并返回 undefined。若你声明为 async，实际返回的是一个 Promise，而 Vue 不会 await 它。这容易引发以下问题：

数据请求完成前，模板已渲染，显示空值或 fallback 内容
错误未被捕获，导致静默失败
与 setup() 或组合式 API 配合时逻辑断裂

推荐做法：在钩子内部调用 async 函数

保持钩子本身是普通函数，在内部定义并立即调用一个异步函数即可。这是最清晰、兼容性最好的方式：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

export default {
  mounted() {
    const loadData = async () => {
      try {
        const res = await fetch('/api/user')
        const user = await res.json()
        this.user = user
      } catch (err) {
        console.error('加载失败', err)
        this.error = '请求出错'
      }
    }
    loadData()
  },
  data() {
    return {
      user: null,
      error: ''
    }
  }
}

Vue 3 组合式 API 中的正确写法

在 setup() 或 onMounted 中，同样不能把钩子本身设为 async，但可以安全地在里面使用 await：

import { onMounted, ref } from 'vue'

export default {
  setup() {
    const user = ref(null)
    const error = ref('')

    onMounted(async () => {
      try {
        const res = await fetch('/api/user')
        user.value = await res.json()
      } catch (err) {
        error.value = '加载失败'
      }
    })

    return { user, error }
  }
}

注意：onMounted 接收的是普通函数，但你在它内部 await 是完全合法且被正确处理的——因为 Promise 在钩子作用域内执行，不影响 Vue 的生命周期调度。