Suspense 是 Vue 3 内置组件，用于声明式处理异步组件加载的占位展示；必须直接包裹异步组件，并同时提供 #default 和 #fallback 插槽，支持骨架屏等高级方案且自动协调加载状态。

Suspense 是 Vue 3 提供的内置组件，专为处理异步组件加载时的占位展示而设计。它不手动控制 loading 状态，而是通过声明式插槽自动协调“加载中”与“加载完成”两个阶段，让页面过渡更自然、代码更简洁。

必须满足的结构要求

使用 Suspense 时，有几点硬性规则不能跳过：

• 异步组件必须是 <Suspense> 的直接子元素，不能嵌套在 div 或其他容器里
• 必须同时提供 #default 和 #fallback 两个具名插槽
• 异步组件需通过 defineAsyncComponent() 定义，或内部 setup 返回 Promise（如含 await）

基础写法示例

这是最常用也最推荐的写法，清晰且无副作用：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

<template>
  <Suspense>
    <template #default>
      <AsyncUserProfile />
    </template>
    <template #fallback>
      <div class="skeleton-profile"></div>
    </template>
  </Suspense>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'
const AsyncUserProfile = defineAsyncComponent(() => 
  import('./components/AsyncUserProfile.vue')
)
</script>

支持骨架屏等高级占位方案

比起简单文字提示，“骨架屏”能保持布局稳定、提升感知速度。Suspense 天然适配这类方案：

立即学习“前端免费学习笔记（深入）”；

• 在 #fallback 中写一个结构相似的灰色占位组件，CSS 控制宽高和动画
• 无需监听 loading 状态或手动切换，Suspense 自动接管整个生命周期
• 多个异步组件共存时，Suspense 会等待全部 resolve 后才切换到 default 插槽

常见错误避坑点

实际开发中容易踩的几个坑：

• 忘记包裹 <Suspense> —— 异步组件会渲染为空白，控制台报 warning
• 把异步组件放在 div 里再塞进 Suspense —— fallback 不触发，因为不是直接子级
• 只写 #default 没写 #fallback —— 默认 fallback 为空，页面看起来像“闪一下”
• 在 #fallback 里放太多交互逻辑 —— 它只是占位 UI，不该承担业务功能