在这个组件树中有多个嵌套组件，要渲染出它们，首先得解析一些异步资源。如果没有 <Suspense>，则它们每个都需要处理自己的加载、报错和完成状态。在最坏的情况下，我们可能会在页面上看到三个旋转的加载态，在不同的时间显示出内容。

有了 <Suspense> 组件后，我们就可以在等待整个多层级组件树中的各个异步依赖获取结果时，在顶层展示出加载中或加载失败的状态。

import Loading from '../components/Loading.vue'
const CompA = defineAsyncComponent({loader: () => new Promise((resolve, reject) => {setTimeout(()=> {return resolve(import('../components/CompA.vue'))}, 1000)}),loadingComponent: Loading,delay: 200,timeout: 3000
})
const CompB = defineAsyncComponent({loader: () => new Promise((resolve, reject) => {setTimeout(()=> {return resolve(import('../components/CompB.vue'))}, 3000)}),loadingComponent: Loading,delay: 200,timeout: 3000
})<Suspense><div><CompA /><CompB /></div><template #fallback><Loading /></template></Suspense>