小编点评

**作用：** * 在使用异步组件时，由于需要等待组件加载完成后才能显示，可能会出现页面空白或显示错误信息的情况。 * Suspense组件可以用来在异步组件加载完成前显示一个占位符，提高用户体验。 **用法：** 1. 创建一个子组件 **AsyncShow**，使用 `promise` 包裹代码。 2. 在子组件中使用 `async` 和 `await` 关键字来异步获取数据。 3. 将子组件实例在父组件中使用 `async` 和 `setup` 方法中。 4. 使用 Suspense 组件将 **AsyncShow** 和 **DogShow** 组件挂载到一个 `Suspense` 中。 5. 在父组件中使用 `fallback` 插槽渲染子组件未加载完毕时候的内容。 **示例代码：** **子组件 AsyncShow** ```vue ``` **子组件 DogShow** ```vue ``` **父组件** ```vue ```

正文

1、作用

在使用异步组件时，由于需要等待组件加载完成后才能显示，因此可能会出现页面空白或显示错误信息的情况。而 Suspense组件的作用就是在异步组件加载完成前显示一个占位符，提高用户体验。

2、用法

• 首先子组件AsyncShow：使用了promise包裹代码

<template>
  <div>
    <h1>{{ result }}</h1>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
 
export default defineComponent({
  setup() {
   return new Promise((resolve) => {
    setTimeout(() => {
      return resolve({
        result: 2
      })
    }, 3000)
   })
  },
})
</script>

• 子组件DogShow代码：使用了async await

<template>
  <div>
    <img :src="rowData && rowData?.data.message" alt="">
  </div>
</template>
<script lang="ts">
import axios from 'axios'
import { defineComponent } from 'vue'
 
export default defineComponent({
  async setup() {
 
    const rowData = await axios.get('https://dog.ceo/api/breeds/image/random')
    return {
      rowData
    }
  },
})
</script>

以上promise 和 async都可以达到效果
父组件引入，suspense包裹这两个组件，然后用fallback插槽渲染子组件未加载完毕时候的内容

<template>
    <Suspense>
        <div>
          <AsyncShow></AsyncShow>
          <DogShow></DogShow>
        </div>
         <!-- 在 #fallback 插槽中显示 “Loading...” -->
        <template #fallback>
          Loading...
        </template>
  </Suspense>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import AsyncShow from './components/AsyncShow.vue';
import DogShow from './components/DogShow.vue';
export default defineComponent({
  setup() {
    return {}
  },
})
</script>

效果：