suspense 是 vue 3 内置异步处理组件，自动监听 promise 并切换 #default（真实内容）与 #fallback（加载态），支持 timeout 超时控制及多异步依赖协同等待。
Suspense 是 Vue 3 内置的声明式异步处理组件，专为包裹异步内容而设计。它不手动管理 loading 状态，而是自动监听子组件或 setup 中的 Promise，未就绪时展示 fallback，就绪后立即切换到真实内容。
必须用对两个插槽：#default 和 #fallback
这两个插槽是 <suspense></suspense> 唯一支持的命名插槽，缺一不可：
-
#default：放真正要渲染的异步内容，比如
<asyncuserlist></asyncuserlist>或包含await的async setup()组件 - #fallback：放加载中 UI，可以是文字、骨架屏、Spinner，甚至带样式的 div
- 注意：不能把普通同步组件直接写在
<suspense></suspense>标签内——必须显式用<template></template>包裹
配合 defineAsyncComponent 实现按需加载
最常见场景是动态导入大组件，Suspense 会自动捕获其加载过程：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 用
defineAsyncComponent定义组件，例如：const AsyncChart = defineAsyncComponent(() => import('./Chart.vue')) - 在
#default中使用该组件：<asyncchart></asyncchart> - 组件尚未 resolve 前，
#fallback内容立即生效；resolve 后，无缝替换 - 如果组件内部还有异步操作（如
onMounted里发请求），Suspense也会等待完成才切换
设置超时避免无限等待
网络不稳定时，用户可能卡在 loading 状态很久。通过 :timeout 控制最大等待时间：
- 加属性
:timeout="3000"，表示最多等 3 秒，超时后强制显示#fallback内容 - 超时后并不中断异步任务，只是提前展示 fallback；一旦异步完成，仍会切回真实内容
- 适合海外 API、高清资源加载等高延迟场景，避免用户面对空白或假死界面
能同时协调多个异步依赖
一个 Suspense 可以覆盖整棵组件树里的异步行为：
- 比如
#default里嵌套了 3 个异步组件 + 1 个async setup()子组件，Suspense会等全部 resolve 后才渲染 - 不是“任一完成就显示”，而是“全部完成才切换”，确保页面状态一致
- 适用于仪表盘、首页聚合页等含多数据源的复杂视图
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
