suspense 的核心是通过 #default 和 #fallback 插槽协同实现平滑过渡：#default 延迟渲染异步组件，#fallback 提供加载态兜底，vue 自动递归等待嵌套异步操作并保持页面响应性。

的核心就是靠 `#default` 和 `#fallback` 这两个插槽协同工作，实现“等待时不白屏、切换时无闪动”的平滑过渡。

#default 插槽放真正要展示的内容
它承载的是异步组件或含顶层 await 的 <script setup></script> 组件。Vue 会自动识别其中的异步依赖（比如动态导入、fetch、await 表达式），并暂停渲染，直到所有依赖就绪。这个插槽不是“立刻显示”，而是“准备好了才上”。

#fallback 插槽负责兜底体验
只要 #default 里的内容还没准备好，#fallback 就持续渲染。它可以是简单文字、加载图标，也可以是骨架屏（skeleton）——关键在于视觉节奏要和后续内容对齐，比如高度一致、动画连贯，避免布局跳动。

平滑过渡的关键细节

• Vue 不是简单地“替换 DOM”，而是在 #fallback 内容挂载后，等 #default 准备就绪，再触发一次受控的 DOM 切换，配合 CSS 过渡类（如 v-enter-active）就能做出淡入、缩放等效果
• 如果 #default 组件内部还有嵌套异步操作（比如子组件也用了 await），<suspense></suspense> 会自动递归等待，无需逐层加 wrapper
• #fallback 渲染期间，页面保持响应，用户可滚动、点击其他区域，不会被阻塞

常见写法示例

Vue-router参考手册

Vue-router参考手册下载

下载

<suspense><template><userprofile :id="userId"></userprofile></template><template><div class="skeleton-profile">
      <div class="skeleton-avatar"></div>
      <div class="skeleton-line" style="width: 60%"></div>
      <div class="skeleton-line" style="width: 40%"></div>
    </div>
  </template></suspense>

注意：UserProfile 必须是异步组件（用 defineAsyncComponent 定义）或含顶层 await 的组件，否则 Suspense 不会触发等待逻辑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！