异步组件常见于代码分割与路由懒加载：组件资源还在网络上时，页面上该显示什么？Suspense 给出统一答案：它有两个插槽，default 放真正的异步组件，fallback 放加载中的占位内容。异步依赖全部就绪前只显示 fallback，全部就绪后才切换到 default，中间过程不需要手动管理 loading 状态。
Suspense 捕获的不只是异步组件的加载，还包括其中 await 的异步请求，配合 defineAsyncComponent 实现按需加载体验非常顺滑。它目前仍是实验性 API，错误处理要用 onErrorCaptured 兜底。路由场景里更常见的做法是路由自身配合加载动画，两种方案择其一即可。
<template> <suspense> <template #default><AsyncChart /></template> <template #fallback> <div class="loading">图表数据加载中，请稍候……</div> </template> </suspense> </template> <script setup> import { defineAsyncComponent } from 'vue'; const AsyncChart = defineAsyncComponent(() => import('./HeavyChart.vue')); </script> <style scoped> .loading { padding: 24px; color: #888; text-align: center; } </style>