定义

在Vue 3中，Suspense组件是一种特殊的组件，用于处理异步组件的加载状态。 Suspense组件可以在异步组件加载完成之前展示一个加载中的状态，以及在加载完成后展示异步组件的内容。

<suspense> 可以等待的异步依赖有两种：

1. 带有异步 setup() 钩子的组件。这也包含了使用 <script setup> 时有顶层 await 表达式的组件（也是异步组件）。
2. 异步组件。使用defineAsyncComponent异步加载组件，如果异步加载的组件内容比较多，也会触发<suspense>

代码分包

defineAsyncComponent异步加载组件的好处

• 不需要把所有编译打包的内容都生成到一个index.js文件里，导致首页加载缓慢，等待时间过长。也就是把不常用的内容下放到A.js里，减少index.js的体积。
• 仅在需要用到的时候，异步加载A.js的内容

父组件

<template>
  <div>
  
    <suspense>
    
      <!--      正常时显示的组件-->
      <template #default>
        <async-vue />
      </template>
      
      <!--      等待异步加载完成时展示的组件-->
      <template #fallback>
        <div>异步加载还没完成时，我在wait------------</div>
      </template>
      
    </suspense>
    
  </div>
</template>

<script lang="ts">
export default {
  name: 'ApplyAWSIndex',
};
</script>
<script setup lang="ts">
import { defineAsyncComponent } from 'vue';

// 异步加载组件
const AsyncVue = defineAsyncComponent(() => import('./B.vue'));
</script>

<style scoped></style>

异步组件

<template>
  <div style="border: 1px solid black; height: 500px; background-color: #1dc8e5">
    异步加载完成后，我是B
    <div>{{ data }}</div>
  </div>
</template>

<script setup lang="ts">
interface DataType {
  name: string;
  age: number;
}

// 模拟请求数据，并耗时2秒
const getData = () => {
  return new Promise<DataType[]>((resolve) => {
    setTimeout(() => {
      const data = [
        {
          name: 'asd',
          age: 12,
        },
        {
          name: 'dfgdfg',
          age: 14,
        },
      ];
      resolve(data);
    }, 2000);
  });
};

// 在顶层直接使用await关键字，那么该组件自动变成异步组件
const data = await getData();
</script>

<style scoped></style>

效果