动态导入需经框架封装（Vue用defineAsyncComponent、React用React.lazy）才能被Suspense识别并协调异步加载；Suspense不直接处理Promise，只响应框架标记的异步组件或顶层await等约定逻辑。
动态导入（import()）本身返回 Promise，是实现异步加载的底层机制；Suspense 不是 JavaScript 原生语法，而是框架级协调组件（Vue 或 React 提供），它不直接“处理”动态导入，而是等待由动态导入触发的异步依赖完成。关键在于：把动态导入封装进框架认可的异步组件定义中，再交由 Suspense 统一管控渲染时机。
Vue 中：用 defineAsyncComponent + Suspense
Vue 3 要求异步组件必须通过 defineAsyncComponent 创建，不能直接在模板里写 <component :is="() => import('./X.vue')"> —— 这样 Suspense 无法识别为异步依赖。
- 正确方式：将
import()包进defineAsyncComponent的loader选项中 -
<Suspense>必须包裹该异步组件实例，且提供#fallback插槽 - 此时组件内若有顶层
await（如<script setup>中直接await fetch()），也会被 Suspense 自动捕获，无需额外包装
React 中：用 React.lazy + Suspense
React 要求动态导入必须由 React.lazy 包裹，否则 Suspense 无法拦截加载状态。
-
const AsyncComp = React.lazy(() => import('./AsyncComp'))是标准写法 -
<Suspense fallback=<Spinner />><AsyncComp /></Suspense>是唯一生效结构 - 注意：
React.lazy只支持默认导出（export default），不支持命名导出；如需使用命名导出，需在目标模块中额外做一层默认导出转发
共同要点：Suspense 不接管 Promise，只接管“框架语义化”的异步行为
Suspense 不会自动监听任意 Promise。它只响应两类明确标记的异步源：
立即学习“Java免费学习笔记（深入）”；
- 被
defineAsyncComponent（Vue）或React.lazy（React）包装的组件加载过程 - 组件内部使用
async setup()或顶层await（Vue），或使用useHook（React Server Components）等框架约定的异步逻辑入口
直接在事件回调里写 await import('./X.vue') 并赋值给 ref，不会触发 Suspense；那只是普通 Promise 操作，需手动控制 loading 状态。
为什么不能跳过封装直接用 import()？
因为 Suspense 需要介入组件生命周期，在挂载阶段就注册异步依赖，并统一调度渲染时机。裸 import() 发生在运行时任意位置，框架无从感知和协调。封装函数（如 defineAsyncComponent）本质是向框架注册一个“待挂载的异步资源描述”，让 Suspense 能提前介入、聚合、超时控制、错误降级——这些能力都建立在框架层约定之上。
