suspense 的核心作用是让异步组件加载过程“看得见”：它监听子组件 pending 状态，在虚拟 dom 层用 fallback 占位，不操作真实 dom；必须显式声明 #default 和 #fallback 插槽，且异步边界须为 suspense 直接子级第一层节点；支持 timeout 控制最长等待时间。
Suspense 的核心作用是让异步组件加载过程“看得见”：它不自己发起请求或加载代码，而是监听子组件是否处于 pending 状态，并在那一刻自动用 fallback 内容占位——这个占位发生在虚拟 DOM 层，不是靠 v-if 切换 DOM 节点，所以更轻、更稳定。
必须显式声明 default 和 fallback 插槽
不能把异步组件直接写成
- ✅ 正确写法：
<template><asyncchild></asyncchild></template> - ❌ 错误写法：
<suspense><asyncchild></asyncchild></suspense>（会被忽略异步边界） - ❌ 错误写法：
<div><asyncchild></asyncchild></div>套一层 div，Suspense 就捕获不到异步状态
异步边界要落在 Suspense 直接子级
Suspense 只能感知其 default 插槽的**第一层子节点**是否为异步组件。常见有效来源包括：
- 用
defineAsyncComponent()定义的组件 - setup() 函数返回 Promise（例如顶层 await 了某个 API 或 import()）
- async setup() 执行未完成
只要其中任意一个子组件处于 pending，整个 Suspense 就保持 fallback 状态；多个异步组件会聚合等待，全部 resolve 后才切换到 default 内容。
占位逻辑在 VNode 层完成，不操作真实 DOM
初始渲染时，如果子组件还没就绪，Vue 会生成一个 shapeFlag 带 SUSPENSE 的特殊 VNode，它的 children 指向 fallback 插槽的 VNode 树。等异步完成，Vue 再重新生成子组件的 VNode 并 patch 替换——用户完全不用手动控制显隐或加 loading class。
可选：用 timeout 控制最长等待时间
给 timeout 属性（单位毫秒），超时后即使子组件未 resolve，也会强制渲染 default 内容（可能报错或空白），避免无限卡在 loading：
-
<suspense :timeout="3000"></suspense>—— 最多等 3 秒 - 设为 0 表示立即 fallback，设为 Infinity（默认）表示一直等待
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
