Vue 3 中 Suspense 不生效是怎么回事？

Good“玲玲提问于 2026-02-25 22:03:21 阅读 20

框架

我在用 Vue 3 的 Suspense 包裹一个异步组件，但页面直接白屏，loading 状态也没显示出来，是不是哪里写错了？

我试过把 setup 里加 await，也确认子组件用了 defineAsyncComponent，但还是不行。

<template>
  <Suspense>
    <template #default>
      <AsyncChild />
    </template>
    <template #fallback>
      <div>加载中...</div>
    </template>
  </Suspense>
</template>

我来解答赞 3 收藏

反馈

2 条解答

子墨 Lv1

问题应该出在你的异步组件实现方式上。Suspense 捕获的是 async setup 里的异步操作，不是 defineAsyncComponent 本身。

很多人有个误区，以为用了 defineAsyncComponent 就能让 Suspense 生效，其实不是的。defineAsyncComponent 只是延迟加载组件文件，而 Suspense 等待的是组件 setup 里抛出的 Promise。

你的子组件得这么写，用 top-level await：

或者用 async setup 的写法：

export default {

  async setup() {

    const data = await fetch('/api/data').then(r => r.json())

    return { data }

  }

}

这样 Suspense 才能捕获到这个 Promise，在等待期间显示 fallback 内容。

另外还有个常见坑，如果异步请求失败了会白屏。Suspense 只管等待，不管错误。错误需要配合 onErrorCaptured 或者 ErrorBoundary 来处理，不然异步报错直接崩掉。

简单加个错误处理：

检查一下你的 AsyncChild 组件，setup 里有没有真正的 await 语句，没有的话 Suspense 没东西可等，自然 fallback 也不会显示。

2026-03-02 12:04

Designer°卫红 Lv1

我一般直接检查子组件是不是真的返回了 Promise，defineAsyncComponent 包裹的组件必须在 setup 里用 return 暴露出来，或者直接在模板里用 defineAsyncComponent 包裹组件对象，比如：

如果还是白屏，大概率是子组件内部报错了，打开控制台看下有没有未捕获的 promise rejection。

2026-02-25 22:04