vue Suspense内置组件

vue3的Suspense用来包裹异步组件或异步setup ，自动等待其加载完成并渲染，同时你可以提供一个回退（fallback）内容。

<template>
  <Suspense>
    <!-- 默认插槽：异步组件或异步 setup 完成后渲染 -->
    <template #default>
      <AsyncComponent />
    </template>

    <!-- 回退插槽：异步未完成时显示 -->
    <template #fallback>
      <div>加载中…</div>
    </template>
  </Suspense>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

// 定义一个异步组件
const AsyncComponent = defineAsyncComponent(() =>
    import('./MyComponent.vue')
)
</script>

要点：
	1.	#default 插槽：放正常组件，它可以是异步组件或在 script setup中使用的异步逻辑（如 await）。
	2.	#fallback 插槽：网络请求、代码分割或异步 setup 未完时会显示这里的内容。
	3.	嵌套 Suspense：可以在更细粒度的组件内部再用 Suspense，实现局部 loading。
	4.	错误边界：配合 ErrorBoundary（第三方或手动实现）可以捕获异步加载错误。
这样就能在组件异步加载时，优雅地显示加载状态，提升用户体验。