Vue3.0+TypeScript中如何在setup()函数中使用async/await

这个问题我之前也碰到过，核心原因是async setup()会返回一个Promise，而Vue默认无法直接处理这种异步返回的组件，必须配合组件来协调异步渲染流程。

具体解决方案 #

1. 保留你的async setup代码（无需修改HelloWorld.vue） #

你的HelloWorld组件代码完全可以保留async setup，TypeScript环境下是支持这种写法的：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>{{ test }}</p>
  </div>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  async setup() {
    // 模拟实际的异步操作，比如接口请求
    const test = await new Promise(resolve => {
      setTimeout(() => resolve('异步加载完成的内容'), 1000)
    })
    return {
      test,
    }
  },
})
</script>

2. 在父组件中用包裹异步组件 #

当使用带有async setup的组件时，必须把它放在<Suspense>标签内部，同时指定一个fallback占位内容（比如加载提示），让Vue在等待异步操作完成时显示过渡内容：

<!-- 示例：App.vue -->
<template>
  <div id="app">
    <Suspense>
      <template #default>
        <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
      </template>
      <template #fallback>
        <div style="text-align: center; padding: 2rem;">加载中...</div>
      </template>
    </Suspense>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld
  }
})
</script>

为什么之前会报错？ #

当你直接使用带有async setup的组件而不用时，Vue尝试渲染组件，但此时组件的状态还处于Promise pending状态，无法获取到有效的DOM节点，这就是控制台报错node is null的原因，最终导致组件无法正常渲染。

额外注意事项 #

• <Suspense>是Vue3内置组件，无需额外引入即可使用
• 记得给异步操作添加错误处理（比如用try/catch包裹await代码），避免Promise reject导致组件一直卡在加载状态
• 如果是路由组件，可以在路由视图外层直接包裹，统一处理所有异步路由组件的加载逻辑

内容的提问来源于stack exchange，提问作者Hendrik Jan