面试题：Vue 3 中的 Suspense 组件有什么作用？如何使用它来处理异步组件？

Vue 3 中的 Suspense 组件

Suspense 是 Vue 3 中引入的一个内置组件，用于处理异步组件的加载状态。

它允许开发者在异步组件加载完成之前显示一个备用内容（如加载动画或占位符），从而提升用户体验。

Suspense 的作用

处理异步组件：
- 当组件需要异步加载时（如通过 defineAsyncComponent 定义的组件），Suspense 可以在组件加载完成之前显示备用内容。
提升用户体验：
- 避免页面空白或闪烁，提供平滑的加载体验。
简化异步逻辑：
- 将异步加载的逻辑与 UI 渲染分离，使代码更清晰。

Suspense 的基本用法

1. 定义异步组件

使用 defineAsyncComponent 定义一个异步组件。

import { defineAsyncComponent } from 'vue';

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

2. 使用 Suspense 包裹异步组件

在模板中使用 <Suspense> 包裹异步组件，并提供一个 #fallback 插槽来显示加载中的内容。

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

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

export default {
  components: {
    AsyncComponent: defineAsyncComponent(() =>
      import('./AsyncComponent.vue')
    ),
  },
};
</script>

在上面的例子中：

当 AsyncComponent 加载时，会显示 #fallback 插槽中的内容（如 “Loading…”）。
当 AsyncComponent 加载完成后，会替换 #fallback 插槽中的内容。

Suspense 的高级用法

1. 处理多个异步组件

Suspense 可以同时处理多个异步组件，只有当所有异步组件都加载完成后，才会替换 #fallback 插槽中的内容。

<template>
  <Suspense>
    <template #default>
      <AsyncComponent1 />
      <AsyncComponent2 />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

2. 结合 `async setup`

在 Vue 3 中，组件的 setup 函数可以是一个异步函数。Suspense 可以自动处理这种异步 setup 函数。

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

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

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

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

在 AsyncSetupComponent.vue 中：

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

<script>
export default {
  async setup() {
    const data = await fetchData(); // 模拟异步操作
    return {
      data,
    };
  },
};
</script>

3. 错误处理

Suspense 本身不提供错误处理机制，但可以通过 onErrorCaptured 钩子捕获异步组件加载中的错误。

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

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

export default {
  components: {
    AsyncComponent: defineAsyncComponent(() =>
      import('./AsyncComponent.vue')
    ),
  },
  setup() {
    onErrorCaptured((error) => {
      console.error('Error loading component:', error);
      return false; // 阻止错误继续向上传播
    });
  },
};
</script>

Suspense 的适用场景

异步组件加载：
- 当组件需要异步加载时，使用 Suspense 提供加载中的状态。
异步数据获取：
- 当组件需要异步获取数据时，使用 async setup 结合 Suspense。
提升用户体验：
- 在加载过程中显示占位符或加载动画，避免页面空白或闪烁。

总结

Suspense 的作用：
- 处理异步组件的加载状态。
- 提供备用内容（如加载动画或占位符）。
- 提升用户体验。
基本用法：
- 使用 defineAsyncComponent 定义异步组件。
- 使用 <Suspense> 包裹异步组件，并提供 #fallback 插槽。
高级用法：
- 处理多个异步组件。
- 结合 async setup。
- 错误处理。
适用场景：
- 异步组件加载。
- 异步数据获取。
- 提升用户体验。