Vue3中的Suspense组件有什么用？

什么是Suspense

官网是这样解释的：<Suspense> 是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。
意思就是一个用于处理异步组件的特殊组件。为了在异步组件加载的过程中展示一些占位内容，而不是直接等待组件加载完成，为了提高用户体验，使得页面的加载状态更加平滑。

如何与异步交互

<Suspense> 的工作方式是，当包裹的异步组件（或异步引用）开始加载时，它会渲染 fallback 插槽中的内容。一旦异步组件加载完成，它将替换 fallback 插槽中的内容，显示实际的组件内容。

通过这种方式，<Suspense> 提供了一种优雅的方式来处理异步组件加载，在开发过程中就可以更好地控制和呈现与异步依赖相关的 UI。
<Suspense> 组件主要解决的问题是在处理异步组件加载时提供更好的用户体验，它能够：

1. 展示占位内容： 在异步组件加载过程中，<Suspense> 允许你提供一个占位内容（通过 fallback 插槽），使用户在等待组件加载时看到一些有意义的内容，而不是空白或加载提示。

2. 简化异步组件的逻辑： 在没有 <Suspense> 的情况下，处理异步组件加载需要开发者手动管理 loading 状态、错误处理等。而使用 <Suspense> 可以让这些逻辑更集中、更容易理解和维护。

在与异步依赖进行交互时，<Suspense> 通常与以下方式结合使用：

1. 异步组件： 在 <Suspense> 中包裹异步组件，使得在组件加载的过程中能够显示指定的占位内容。

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

2. <script setup> 中的异步引用： 在 Vue 3 中，使用 <script setup> 语法，可以在 setup 函数中使用异步引用（import()）加载组件或模块。

   <template>
     <Suspense>
       <template #default>
         <AsyncComponent />
       </template>
       <template #fallback>
         <div>Loading...</div>
       </template>
     </Suspense>
   </template>
   
   <script setup>
     import { ref } from 'vue';
     const AsyncComponent = import('./AsyncComponent.vue');
   </script>
   

异步加载状态

<Suspense> 组件在处理异步加载时有三种状态：idle、pending 和 error。这些状态用于跟踪异步组件的加载过程。

1. idle 状态： 初始状态，表示异步组件没有开始加载。

2. pending 状态： 表示异步组件正在加载中。在这个状态下，<Suspense> 会渲染 fallback 插槽中的内容，即占位符。

3. error 状态： 表示异步组件加载过程中发生了错误。在这个状态下，<Suspense> 会渲染 fallback 插槽中的内容，通常用于显示加载失败的信息。

这些状态可以通过 suspense 全局 API 或者 setup 函数中的 ref 属性进行访问和控制。

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div v-if="status === 'pending'">Loading...</div>
      <div v-else-if="status === 'error'">Error!</div>
    </template>
  </Suspense>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const status = ref('idle');

    // 模拟异步加载
    const loadAsyncComponent = () => {
      status.value = 'pending';
      import('./AsyncComponent.vue')
        .then(() => {
          status.value = 'idle';
        })
        .catch(() => {
          status.value = 'error';
        });
    };

    // 在组件挂载时执行异步加载
    onMounted(() => {
      loadAsyncComponent();
    });

    return { status };
  },
};
</script>

在这个例子中，通过 status 变量来跟踪异步加载状态。当状态为 pending 时，显示加载中的提示；当状态为 error 时，显示加载错误的提示。在异步加载完成后，状态变为 idle，此时显示实际的异步组件内容。

小结

Vue3 Suspense 是 Vue3 的一个新特性，它可以优化和改善异步组件的加载过程并提高用户体验。通过并行加载和懒加载并执行提前预取等技术，它可以减少等待时间，提高加载速度。使用也很简单，只需要将需要用Suspense组件包裹需要异步加载的组件就行。需要定义 fallback 模板，用于在异步组件加载完成前展示 Loading 状态。