Vue3 Suspense是干嘛的

Suspense 是 Vue 3 中引入的一个内置组件，主要用于处理异步组件的加载状态。它允许你在等待异步组件加载时显示一个备用内容（如加载指示器），从而提升用户体验。

主要用途

Suspense 的主要用途是处理以下场景：

1. 异步组件加载：当组件需要异步加载时（例如通过 defineAsyncComponent 定义的组件），Suspense 可以在组件加载完成之前显示一个备用内容。
2. 异步数据获取：当组件内部需要异步获取数据时，Suspense 可以在数据加载完成之前显示一个备用内容。

基本用法

Suspense 组件有两个插槽：

• #default：用于放置异步组件或需要等待异步操作的内容。
• #fallback：用于放置备用内容（如加载指示器），在异步操作完成之前显示。

示例 1：异步组件加载

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

<script>
import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
);

export default {
  components: {
    AsyncComponent,
  },
};
</script>

在这个例子中，AsyncComponent 是一个异步加载的组件。在组件加载完成之前，Suspense 会显示 #fallback 插槽中的内容（即 "Loading..."）。

示例 2：异步数据获取

<template>
  <Suspense>
    <template #default>
      <UserProfile :user="user" />
    </template>
    <template #fallback>
      <div>Loading user data...</div>
    </template>
  </Suspense>
</template>

<script>
import { ref } from 'vue';
import UserProfile from './UserProfile.vue';

export default {
  components: {
    UserProfile,
  },
  async setup() {
    const user = ref(null);

    // 模拟异步数据获取
    user.value = await fetchUserData();

    return {
      user,
    };
  },
};

function fetchUserData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 2000);
  });
}
</script>

在这个例子中，setup 函数中有一个异步操作（fetchUserData），用于获取用户数据。在数据加载完成之前，Suspense 会显示 #fallback 插槽中的内容（即 "Loading user data..."）。

注意事项

1. 错误处理：Suspense 本身不提供错误处理机制。如果异步操作失败，你需要使用 onErrorCaptured 钩子或其他错误处理机制来捕获和处理错误。
2. 嵌套使用：Suspense 可以嵌套使用，但需要注意每个 Suspense 的 #fallback 内容只会在其直接子组件的异步操作未完成时显示。

总结

Suspense 是 Vue 3 中用于处理异步组件加载和异步数据获取的强大工具。它通过提供备用内容（如加载指示器）来提升用户体验，使应用在等待异步操作完成时更加友好和流畅。