Vue 3 第十七章：组件五（内置组件-Suspense）

1. Vue3 中的 Suspense 组件

Vue3 中增加了一个名为Suspense的内置组件，用于在异步组件加载完成前显示占位符，避免页面空白或显示错误信息。本文将介绍 Suspense 组件的作用、用法以及相关注意事项。

注意：<Suspense>是一项实验性功能。它不一定会最终成为稳定功能，并且在稳定之前相关 API 也可能会发生变化。

1.1. 作用

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

1.2. 用法

在 Vue3 中使用Suspense组件的方法如下：

<template>
  <div>
    <Suspense>
      <template #default>
        <AsyncComponent />
      </template>
      <template #fallback>
        <div>Loading...</div>
      </template>
    </Suspense>
  </div>
</template>

<script setup lang="ts">
import {
      
       defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'))

</script>

在上面的代码中，我们定义了一个异步组件 AsyncComponent。接着，在template中使用了Suspense组件，并将 AsyncComponent作为其 default 插槽内容。在异步组件加载完成前，显示一个占位符 Loading...。

1.3. 注意事项

在使用 Suspense 组件时，需要注意以下几点：

1. Suspense组件只能包含一个异步组件，否则会抛出错误。
2. fallback插槽中的内容只能是一个单独的元素，否则会抛出错误。
3. 异步组件必须通过defineAsyncComponent方法定义，否则无法使用Suspense组件。
4. 为了提高用户体验，建议在fallback插槽中显示一个占位符，如 Loading...。