当前位置：首页 > article >正文

Vue - Suspense的使用

article 2025/2/3 16:04:25

在 Vue 3 中，Suspense 是一个用于处理异步组件的 API。它允许在加载异步组件时提供一个后备内容（例如加载指示器），从而改善用户体验。在加载期间，可以在页面上显示一个占位符，而不是让用户看到一个空白或错误的状态。

Suspense 主要用于处理以下场景：

加载异步组件（如从服务器获取的组件）。
处理异步操作（如数据获取、代码分割等）。
提升用户体验，使得加载时 UI 不会出现闪烁或不一致的状态。

基本语法

Suspense 的基本用法非常简单，可以直接在组件中使用。它包含两个插槽：

default：当所有异步依赖加载完成时显示的内容。
fallback：在异步组件加载过程中显示的内容。

基本结构

<template>
  <Suspense>
    <template #default>
      <!-- 异步组件或其他内容 -->
    </template>
    <template #fallback>
      <!-- 加载时的占位内容 -->
    </template>
  </Suspense>
</template>

示例

// AsyncComponent.vue

<template>
  <div>
    <h2>异步组件内容</h2>
    <p>当前时间：{
  
  { currentTime }}</p>
  </div>
</template>

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

const currentTime = ref('');

onMounted(() => {
  // 模拟数据加载
  setTimeout(() => {
    currentTime.value = new Date().toLocaleTimeString();
  }, 2000); // 2 秒加载延迟
});
</script>

// 主组件

<template>
  <div>
    <h1>主组件</h1>
    <Suspense>
      <template #default>
        <AsyncComponent />
      </template>
      <template #fallback>
        <div>加载中...</div> <!-- 加载时的占位内容 -->
      </template>
    </Suspense>
  </div>
</template>

<script setup>
import AsyncComponent from './AsyncComponent.vue';
</script>