<Suepense></Suepense>
vue3 中新增的内置组件，用于处理异步组件加载的状态，使页面视觉可以更加平滑的过渡，用于异步组件异步数据的获取与处理，并提供一种新的组件加载状态，直到组件解析加载完成；
作用：
异步组件加载：当使用异步组件时，允许你定义一个loading状态，直到该组件可用。
数据异步获取：对于需要异步获取数据的组件，Suspense 可以等待数据加载完成之后，再进行组件的渲染。
进行代码分割：配合 Vue 3 的异步组件和 Webpack 的代码分割功能，Suspense 可以实现更加高效的代码加载，减少初始加载时间。
用户体验更好：通过定义组件的加载状态和错误处理，Suspense 提供了更平滑的解决方案，使UI加载更加流畅，有助于用户体验的提升，避免了加载过程中的空白或闪烁问题。
应用场景
懒加载组件：在应用中使用懒加载技术时，Suspense 可以提供一个加载中状态，告诉用户内容正在加载中。
组件异步渲染：对于依赖于异步数据的组件，可以使用 Suspense 包裹这些组件，直到所有需要的数据加载完成后再渲染。
路由懒加载：在 Vue 路由配置中，可以结合 Suspense 使用，实现路由级别的懒加载，优化应用的启动速度。
动态导入（Code Splitting）：当使用动态 import() 语法导入组件时，Suspense 可以处理组件加载过程中的各种状态，提升应用性能。
<Suspense></Suspense> 组件主要有两个插槽：#default 和 #fallback。两个插槽都只允许一个直接子节点。在可能的时候都将显示默认槽中的节点。否则将显示后备槽中的节点。
<template>
<div class="my-suspense">
<!-- 如果 suspense 组件外部有父组件，则在 suspense 组件 default插槽中可以渲染其他具名插槽内容，切记只能有一个子节点，否则无法渲染 -->
<Suspense>
<template #default>
<!-- 不管是否写 #default 插槽，默认都是渲染到default 插槽中 -->
<div class="my-suspense-default">
<!-- 只能在此处 渲染默认插槽的内容， -->
<!-- <slot name="header">增加一个header具名插槽</slot> -->
<!-- 这里还可以动态渲染其他组件 -->
</div>
</template>
<template #fallback>
<!-- fallback插槽 用来显示 数据 或组件加载中状态 -->
<span>Loading...</span>
</template>
</Suspense>
</div>
</template>
suspense组件 最开始是先渲染的默认插槽中的内容，而在默认插槽渲染的进程中，如果遇见异步加载的组件或数据，则会渲染fallback 插槽中的内容；等异步数据加载完成之后，fallback 插槽中的 加载中 数据会自动消失，进而渲染为默认插槽中的数据；
注意：<Suepense></Suepense>目前处于实验性阶段，切勿用在生产环境中，具体请查看vue3官网：
