Vue3之Suspense 加载异步组件

suspense是什么？

1. <Suspense> 是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。
2. <Suspense> 组件有两个插槽：#default 和 #fallback。
   两个插槽都只允许一个直接子节点。在可能的时候都将显示默认槽中的节点。否则将显示后备槽中的节点。
3. <Suspense> 组件会触发三个事件：
   pending、resolve 和 fallback。pending 事件是在进入挂起状态时触发。
   resolve 事件是在 default 插槽完成获取新内容时触发。
   fallback 事件则是在 fallback 插槽的内容显示时触发。

使用示例

<Suspense>
<component :is="loadComponent(item)" :data="item" :flowDetail="item" :formDisabled="true"></component> // 默认指向的是第一个插槽default 对应 resolve 状态
<template #fallback> // fallback 插槽 可以理解为加载loading 效果的容器 对应 pending 状态
<div v-loading="true" class="w-full h-[100px]"></div>
</template>
</Suspense>