Suspense 组件

约 1377 字大约 5 分钟

2025-03-13

Vue3 中的 Suspense 组件是一种特殊的组件，用于处理 适用于异步组件、异步数据请求和其他延迟加载的场景。

主要作用

加载状态的处理：当我们使用异步组件（如动态 import）时，Suspense 组件可以用来展示在异步组件加载完成之前的占位内容（如加载中的提示），提供更好的用户体验。
错误处理：在异步组件加载过程中，如果出现错误，Suspense 组件可以用来展示错误的处理内容（如错误提示），从而提供更友好的错误响应。
嵌套异步组件的配合使用：如果应用中有多个嵌套的异步组件，Suspense 组件可以在这些异步组件加载过程中统一处理加载状态和错误，使得代码更加整洁和可读。

使用Suspense组件，我们可以通过简洁的方式处理异步组件的加载状态和错误，并进行统一的处理。它提供了一种更好的机制来优化异步组件的用户体验和错误处理。

基本插槽

默认插槽 (default)：当异步操作完成后，渲染异步组件或数据。
等待中的插槽 (fallback)：在异步操作进行时显示的占位内容，通常用于显示加载动画或提示。
错误插槽 (error)：在异步加载失败时显示的内容。

基本用法

示例代码：

<template>
  <div>
    <suspense>
      <template #default>
        <async-component />
      </template>
      <template #fallback>
        <div>正在加载...</div>
      </template>
    </suspense>
  </div>
</template>

<script setup>
import { defineAsyncComponent } from "vue";

const AsyncComponent = defineAsyncComponent(() =>
  import("./AsyncComponent.vue")
);
</script>

在这个例子中：

AsyncComponent 是一个异步组件，它被懒加载，直到需要渲染时才会加载。
Suspense 的 fallback 插槽会在异步组件加载时显示“正在加载…”。
default 插槽会在 AsyncComponent 加载完成后渲染异步组件。

与异步操作结合使用

<Suspense> 不仅适用于异步组件，还可以用于处理异步数据。例如，你可能需要在组件中进行 API 请求，并希望在数据加载时显示一个加载状态。

<template>
  <suspense>
    <template #default>
      <div>{{ message }}</div>
    </template>
    <template #fallback>
      <div>数据加载中...</div>
    </template>
  </suspense>
</template>

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

const message = ref("");

const fetchData = async () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("加载完成的数据");
    }, 2000);
  });
};

onMounted(async () => {
  message.value = await fetchData();
});
</script>

在这个例子中：

fetchData 是一个异步函数，模拟了从 API 获取数据的过程。
在 Suspense 中，fallback 插槽会显示“数据加载中…”，而 default 插槽则在数据加载完成后显示 message。

错误处理

<Suspense> 也支持错误处理，当异步操作（如组件加载或数据请求）失败时，可以通过 error 插槽显示错误信息。

<template>
  <suspense>
    <template #default>
      <div>{{ message }}</div>
    </template>
    <template #fallback>
      <div>加载中...</div>
    </template>
    <template #error>
      <div>加载失败，请重试。</div>
    </template>
  </suspense>
</template>

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

const message = ref("");

const fetchData = async () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error("请求失败"));
    }, 2000);
  });
};

onMounted(async () => {
  try {
    message.value = await fetchData();
  } catch (error) {
    console.error(error);
  }
});
</script>

在这个例子中：

如果 fetchData 发生错误，error 插槽会被触发，显示“加载失败，请重试。”。
default 插槽会显示数据，而 fallback 插槽会显示加载状态。

延迟和超时处理

你可以通过 defineAsyncComponent 来设置组件加载时的延迟、加载状态超时以及加载失败后的错误提示。

<template>
  <suspense>
    <template #default>
      <async-component />
    </template>
    <template #fallback>
      <div>加载中...</div>
    </template>
    <template #error>
      <div>加载超时或失败，请重试。</div>
    </template>
  </suspense>
</template>

<script setup>
import { defineAsyncComponent } from "vue";

const AsyncComponent = defineAsyncComponent({
  loader: () => import("./AsyncComponent.vue"),
  loadingComponent: () => <div>加载中...</div>,
  errorComponent: () => <div>加载失败</div>,
  delay: 300, // 设置延迟显示加载组件的时间
  timeout: 5000, // 设置加载超时的时间（毫秒）
});
</script>

在这个例子中：

delay 属性指定在开始加载组件后，加载提示显示的延迟时间。
timeout 属性指定加载组件的最大超时限制，超时后会触发错误处理。

嵌套使用

你可以嵌套多个 <Suspense> 组件，用来分别处理不同层级的异步加载，特别是当页面中有多个异步组件时。

<template>
  <suspense>
    <template #default>
      <div>
        <h2>主内容</h2>
        <suspense>
          <template #default>
            <async-component />
          </template>
          <template #fallback>
            <div>子组件加载中...</div>
          </template>
        </suspense>
      </div>
    </template>
    <template #fallback>
      <div>加载主内容...</div>
    </template>
  </suspense>
</template>

<script setup>
import { defineAsyncComponent } from "vue";

const AsyncComponent = defineAsyncComponent(() =>
  import("./AsyncComponent.vue")
);
</script>

在这个例子中：

外层的 <Suspense> 控制主内容的加载状态。
内层的 <Suspense> 控制子组件的加载状态。

总结

异步组件：通过 defineAsyncComponent 和 <Suspense>，你可以异步加载组件，并在加载时显示占位内容。
数据加载：<Suspense> 也适用于异步数据请求，可以在等待数据时显示加载状态。
错误处理：当异步操作失败时，<Suspense> 提供了 error 插槽来处理错误并显示提示。
延迟和超时：通过 defineAsyncComponent，你可以设置加载延迟、超时和错误处理。
嵌套使用：<Suspense> 可以嵌套使用，用于处理多个异步操作和多个异步组件的加载。

<Suspense> 是 Vue 3 中处理异步加载的强大工具，它使得异步组件和数据加载的处理变得更加灵活和优雅。通过使用 fallback、default 和 error 插槽，你可以很好地管理应用的异步操作，并确保用户获得流畅的体验

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24

核心语法

路由

Suspense 组件

基本插槽

基本用法

与异步操作结合使用

错误处理

延迟和超时处理

嵌套使用

总结

更新日志