Vue Suspense 组件

Suspense 处理异步加载的组件

Vue3 中的 Suspense 组件是一个用于处理异步加载的组件; 它允许你在组件树中显示一个加载指示器, 直到异步操作完成并渲染实际内容; 这对于处理需要从服务器获取数据或执行其他耗时操作的组件非常有用;

触发条件

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

1. 带有异步 setup() 钩子的组件。包括使用 <script setup> 时有顶层 await 表达式的组件。

2. 异步组件。参考 异步组件

基本用法

fallback 插槽

通过插槽 #fallback 显示 loading 指示器

使用 Vue3 的 Suspense 组件的基本语法如下：

ParentSuspense 组件

<script setup>
import ChildAsync from "@/components/ChildAsync.vue";
</script>

<template>
  <div>
    <suspense>
      <template #fallback>
        <!-- 加载指示器, 例如一个旋转的圆圈 -->
        <div>加载中...</div>
      </template>
      <ChildAsync />
    </suspense>
  </div>
</template>

ChildAsync 组件

<script setup>
import { ref } from "vue";
const data = ref("");

const getAsyncData = () => {
  return new Promise((resolve) => {
    setTimeout(() => resolve("这是一个异步组件"), 1000);
  });
};
data.value = await getAsyncData(); 
</script>

<template>
  <div>
    {{ data }}
  </div>
</template>

在上面的示例中, 我们首先导入异步组件ChildAsync; 然后, 在模板中, 我们使用<suspense>标签包裹我们的组件; 在这个标签内部, 我们可以定义一个名为fallback的插槽, 它将在异步操作完成之前显示; 在这个例子中, 我们只是简单地显示了一个“加载中...”的文本;

当异步操作完成时, Vue3 会自动替换<suspense>标签内的内容; 这意味着你的应用程序将不会因为等待异步操作而冻结; 相反, 它会正常地渲染其他组件;

总之, Vue3 的 Suspense 组件提供了一种简单且有效的方式来处理异步加载; 通过使用fallback插槽和动态控制其显示与隐藏, 你可以在应用程序中实现更流畅的用户体验;