<Suspense> 等待异步依赖

最后更新：2026-10-22

在异步依赖（异步组件、async setup）就绪前显示兜底内容，就绪后切换到真实内容。

📝 语法

<Suspense>
  <template #default><AsyncChild /></template>
  <template #fallback><p>加载中…</p></template>
</Suspense>

props	#default（异步内容）/ #fallback（等待时显示）

修改下面的代码，在预览区实时查看效果：

输出：

先显示「加载中…」，约 0.8 秒后切换为「异步内容加载完成」。

⚠️ 注意 仍是实验性 API：语法可能随版本调整，生产使用需评估。

ℹ️ 说明 只等第一层异步依赖；嵌套 Suspense 各自处理自己的等待。

💡 提示 异步组件 + Suspense 是路由懒加载的常见组合。

更多案例即将上线。

Q 和 loading 状态的 v-if 有什么区别？

A Suspense 自动感知异步就绪，无需手写 loading 状态流转。

Q SSR 下能用吗？

A 服务端会等待异步内容再输出 HTML（需框架支持），客户端接管后继续。

Q 错误怎么处理？

A 异步失败由 onErrorCaptured / errorHandler 捕获，Suspense 本身不做兜错。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。