vue 3 中 suspense 协调异步依赖的核心是让组件可被捕获：通过 顶层 await 或 setup 返回 promise，使组件变为异步；suspense 依据 #default 插槽内组件是否满足任一条件来等待，并配合 #fallback 与 @error 处理加载与错误状态。

是 Vue 3 中协调异步依赖的内置方案，它本身不写在 `setup` 里，而是作为模板层的容器组件存在。真正需要在 `setup` 中配合处理的，是让组件“可被 Suspense 捕获”——即让组件内部产生一个能被 Suspense 自动等待的异步信号。

关键不在“怎么在 setup 里用 Suspense”，而在于：如何写出能让 Suspense 正确识别并等待的 setup 逻辑。

---

✅ 让 setup 支持 Suspense 的两种主流方式

• 顶层 await（最简洁）
  在 <script setup></script> 中直接 await 一个 Promise，整个组件会自动变成异步组件，Suspense 就能捕获它：

  <script setup>
  import { ref } from 'vue'
  // 这个 await 会让组件进入 pending 状态
  const data = await fetch('/api/user').then(r => r.json())
  const name = ref(data.name)
  </script>

  ⚠️ 注意：必须是顶层 await（不能包裹在函数里），且仅适用于 <script setup></script>；编译器会自动将该组件转为异步组件。

• 返回 Promise（兼容选项式或复杂逻辑）
  若用 defineComponent 或需更精细控制，可在 setup() 中返回 Promise：

  export default defineComponent({
    async setup() {
      const res = await fetch('/api/dashboard')
      const data = await res.json()
      return { data }
    }
  })

  Vue 会把返回 Promise 的 setup 视为异步 setup，Suspense 同样生效。

---

? Suspense 怎么配合这些 setup？

它只认两件事：

• <suspense></suspense> 的 #default 插槽里放的是「可能异步」的组件（比如动态导入的、含顶层 await 的、或 setup 返回 Promise 的）
• #fallback 插槽放加载中 UI（比如 <spinner></spinner> 或纯文字）

示例结构：

<template><suspense><template><asyncuserprofile></asyncuserprofile></template><template><div class="loading">正在加载用户信息…</div>
    </template></suspense></template>

其中 AsyncUserProfile.vue 只需满足上面任一条件（顶层 await 或异步 setup），Suspense 就会接管它的加载生命周期。

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

---

⚠️ 常见失效原因与修复

• Fallback 不显示？

  • 组件没真正异步（比如 await 写在函数里，不是顶层）
  • #default 里放的是同步组件（如普通 <usercard></usercard>）
  • 异步操作被 try/catch 吞掉且没 rethrow，导致 Promise 立即 resolve

• 多个异步一起等？
  Suspense 天然聚合：只要 #default 下任意子组件（包括深层嵌套）有异步 setup 或顶层 await，它都会等全部完成才切换。

• 错误状态没处理？
  Suspense 提供 @error 事件，可监听异步失败：

  <suspense><template><asyncwidget></asyncwidget></template><template><loading></loading></template></suspense>

  错误不会冒泡到父组件，必须在这里捕获。

---

? 补充建议：和 defineAsyncComponent 搭配更可控

当异步逻辑集中在组件加载阶段（而非数据获取），推荐用 defineAsyncComponent 显式定义：

import { defineAsyncComponent } from 'vue'
const AsyncChart = defineAsyncComponent(() => import('./Chart.vue'))

这样既能利用 Suspense，又能单独配置 loading 延迟、超时、错误组件等，比纯 setup 异步更易维护。

不复杂但容易忽略。

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！