Suspense

Vue3官网Suspense

异部组件

Suspense是一个组件，它允许应用程序在等待异步组件加载时渲染一些后备内容，从而创建平滑的用户体验。

Suspense提供一个loading效果功能。

Suspense自带两个slot，分别为default和fallback。当要加载的组件不满足状态时，Suspense将回退到fallback状态，直到加载的组件满足条件，才会进行渲染。这在处理异步组件时，可以将在组件加载过程中展示一些加载提示或占位符内容，提升用户体验。

使用Suspense的基本步骤包括：

1. 使用defindAsyncComponent定义异步组件；
2. 使用Suspense组件包裹要加载的异步组件，并配置好default和fallback slot。

例如： ParentShow.vue

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

<script setup>
import { defineAsyncComponent } from "vue";
//借助defineAsyncComponent动态引入
const ChildShow = defineAsyncComponent(() => import("./ChildShow.vue"));
</script>

ChildShow.vue

<template>
  <div>
    <ul>
      <li v-for="item in jsonData" :key="item.name">
        {{ item.name }} ({{ item.age }})
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from "vue";
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {//模拟异步请求
      resolve([
        {
          name: "张三",
          age: 15,
        },
        {
          name: "李四",
          age: 17,
        },
        {
          name: "王五",
          age: 17,
        }
      ]);
    }, 1000);
  });
}

const data = await fetchData()
const jsonData = ref(data);
</script>