<Suspense> 是一个内置组件，用于协调其组件树中的 async dependencies — 它显示一个 fallback（加载 UI），直到所有嵌套的异步操作完成，然后显示真实内容。它消除了手动 isLoading 的样板代码。
<template>
<Suspense>
<template #default>
<UserDashboard /> <!-- a component with async setup -->
</template>
<template #fallback>
<LoadingSpinner /> <!-- shown while #default is resolving -->
</template>
</Suspense>
</template>
<!-- UserDashboard.vue -->
<script setup>
// top-level await makes this an "async component" that Suspense waits for
const user = await fetchUser(); // no isLoading state needed here
const posts = await fetchPosts();
</script>
<template>
<h1>{{ user.name }}</h1>
<PostList :posts="posts" />
</template>
通常，组件无法在 setup 中使用 await 而不管理加载状态。<Suspense> 让子组件能够使用 top-level await（或 async setup），而父级 Suspense 为它处理加载状态 — 子组件代码保持清洁，只需 await 其数据。
<Suspense> waits for every async setup in its subtree to resolve,
then swaps the fallback for the real content in one go
(avoids a cascade of separate spinners).
<script setup>
import { onErrorCaptured } from "vue";
onErrorCaptured((err) => { /* handle async setup failures */ return false; });
</script>
将 Suspense 与错误边界（onErrorCaptured）配对，以处理失败的异步 setup，因为 Suspense 本身只管理加载/已加载的过渡。
<Suspense> has been an EXPERIMENTAL feature — its API may change.
It's also what Nuxt uses internally to coordinate async page data.
<Suspense> 以声明式的方式协调异步加载状态 — 让组件直接 await 它们的数据，而单个祖先在所有内容就绪之前显示一个 fallback。
它消除了分散的 isLoading 标志和多个加载指示器，并在 Nuxt 等框架中为数据获取奠定了基础。
了解它的存在（以及它仍处于实验阶段，最好与错误边界配对）对于实现清洁的异步 UI 很有用，特别是在 SSR/数据密集型应用中。