Vue - <Suspense> 🔑

在 Vue 3 中，<Suspense> 是一个内置的组件，用于处理异步组件的渲染。它允许你在等待异步操作完成时展示一个占位内容（比如加载指示器），并在异步操作完成后显示实际内容。这对于处理网络请求、数据加载等场景非常有用

1. 含义

<Suspense> 组件的核心功能是等待其子组件或异步操作完成后再进行渲染。如果子组件是一个异步组件，那么 <Suspense> 将会在子组件加载完成之前显示一个占位符内容，当加载完成后替换为实际内容

2. 作用

  • 改善用户体验：在数据加载或异步操作期间展示一个加载指示器，可以防止用户看到空白屏幕或不完整的内容
  • 简化异步逻辑：通过 <Suspense>，你可以更直观地管理异步组件的加载状态，而不需要手动处理复杂的状态管理逻辑

3. 使用方法

以下是一个基本示例，展示如何在 Vue 3 中使用 <Suspense> 组件： 假设有一个异步组件 AsyncComponent.vue：

<template>
  <div>异步加载完成的组件内容</div>
</template>

<script>
export default {
  async setup() {
    // 模拟异步操作，比如数据加载
    await new Promise(resolve => setTimeout(resolve, 2000));
  }
};
</script>

在主组件中使用 <Suspense> 组件：

<template>
  <div>
    <Suspense>
      <template #default>
        <AsyncComponent />
      </template>
      <template #fallback>
        <div>加载中...</div>
      </template>
    </Suspense>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import AsyncComponent from './AsyncComponent.vue';

export default defineComponent({
  components: {
    AsyncComponent
  }
});
</script>

4. 详细介绍

  • <Suspense> 组件：包含两个插槽，default 和 fallback。

    • default 插槽：包含需要异步加载的组件或内容
    • fallback 插槽：当异步组件或操作尚未完成时显示的占位符内容（如加载指示器）

  • 异步组件：使用 async setup() 函数定义一个组件，使其支持异步操作。在异步操作完成之前，<Suspense> 将显示 fallback 插槽中的内容

  • 控制异步逻辑：<Suspense> 组件会自动处理异步逻辑，并在异步操作完成后自动切换到实际内容，简化了状态管理

5. 高级用法

  • 多个异步组件：<Suspense> 可以处理多个嵌套或并行的异步组件，所有子组件都加载完成后才会显示实际内容
  • 超时处理：可以通过 timeout 属性设置超时处理，在异步操作超过一定时间后显示不同的内容

示例：多个异步组件

<template>
  <div>
    <Suspense>
      <template #default>
        <AsyncComponent1 />
        <AsyncComponent2 />
      </template>
      <template #fallback>
        <div>加载中...</div>
      </template>
    </Suspense>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import AsyncComponent1 from './AsyncComponent1.vue';
import AsyncComponent2 from './AsyncComponent2.vue';

export default defineComponent({
  components: {
    AsyncComponent1,
    AsyncComponent2
  }
});
</script>

Comments

Leave a Comment