Vue 3中如何使用Suspense？

处理异步组件加载，你是不是还在手动写v-if和加载中状态？那种在模板里到处写<div v-if="loading">加载中...</div>的日子，在Vue 3里可以变得更优雅了。<Suspense>是一个内置组件，它专门用来协调组件树中异步依赖的加载状态，让你能声明式地处理“等待”这个状态。

给异步组件一个优雅的占位符

<Suspense>的基本用法很简单。它有两个插槽：#default和#fallback。#default槽里放你的异步组件（比如用了async setup或者返回Promise的组件），#fallback槽里放加载过程中要显示的内容。

<template>
  <Suspense>
    <template #default>
      <AsyncUserPanel />
    </template>
    <template #fallback>
      <div class="loading-spinner">正在拼命加载...</div>
    </template>
  </Suspense>
</template>

<script setup>
// 这是一个异步组件，内部可能有 async setup 或 await 操作
const AsyncUserPanel = defineAsyncComponent(() =>
  import('./UserPanel.vue')
);
</script>

当AsyncUserPanel组件还在努力加载（或者它的async setup函数还没执行完）的时候，用户看到的是那个转圈的加载动画。一旦组件准备就绪，<Suspense>会自动切换到显示真正的组件内容。这比手动管理加载状态变量清爽多了。

不只是组件，任何异步依赖都可以

<Suspense>的强大之处在于，它能等待嵌套在内部的所有异步依赖都解决。这个异步依赖可以是一个异步组件，也可以是组件内部通过await进行的异步操作。

<!-- UserPanel.vue 内部 -->
<script setup>
const userData = await fetchUserData(); // 在 setup 里直接 await
const posts = await fetchUserPosts();
</script>

现在，即使用户数据接口fetchUserData很快，但帖子接口fetchUserPosts很慢，外层的<Suspense>也会耐心地等到两者都完成，才一起替换掉fallback内容。这让处理多个并行异步请求的状态变得异常简单。

错误处理，别忘了这一环

异步操作总有可能失败。<Suspense>本身不处理错误，但你可以配合Vue的错误捕获机制，比如onErrorCaptured生命周期钩子，来优雅地展示错误界面。

<script setup>
import { onErrorCaptured } from 'vue';
onErrorCaptured((err) => {
  // 在这里处理异步组件或操作抛出的错误
  error.value = err;
  return false; // 阻止错误继续向上冒泡
});
</script>

<template>
  <div v-if="error">糟糕，加载失败了: {{ error.message }}</div>
  <Suspense v-else> ... </Suspense>
</template>

记住，<Suspense>目前还是一个实验性特性，API未来可能有调整。但在合适的场景下（比如路由级或功能模块级的异步加载），它能显著提升代码的可读性和用户体验。下次做那些需要“等一等”的功能时，不妨试试它。