vue3 Suspense组件

在 Vue 3 中，<Suspense> 组件用于处理异步组件加载时的等待状态和错误处理。它允许你在加载异步组件时显示一个自定义的加载指示器，以及在加载失败时显示错误信息。以下是一个详细的 <Suspense> 组件的使用示例：

首先，假设我们有一个异步加载的组件，例如AsyncComponent：

// AsyncComponent.vue
    <template>
      <div>
        <p>This is an async component!</p>
      </div>
    </template>

接下来，我们将在父组件中使用 <Suspense> 来加载这个异步组件，并处理加载状态和错误：

<template>
  <div>
    <h1>Using Suspense in Vue 3</h1>

    <Suspense>
      <template #default>
        <!-- 这里是异步组件的渲染区域 -->
        <AsyncComponent />
      </template>

<template #fallback>
  <!-- 这里是加载指示器 -->
  <div class="loading-indicator">
    Loading...
  </div>
</template>
             </Suspense>
               </div>
               </template>

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

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

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

<style>
  .loading-indicator {
  text-align: center;
  font-size: 20px;
  color: #333;
  padding: 20px;
  }
</style>

在上述示例中，我们首先使用 defineAsyncComponent 来定义一个异步组件 AsyncComponent。然后，在父组件中，我们使用 <Suspense> 组件包裹了异步组件，并提供了两个插槽：#default 和 #fallback。

• #default 插槽用于渲染异步组件，当异步组件加载完成后，它将在这里显示。
• #fallback 插槽用于显示加载指示器，当异步组件加载时，它将在这里显示。这个插槽用于展示加载过程中的内容，以提供用户反馈。

当你访问包含上述代码的页面时，Vue 3 将自动处理异步组件的加载，并在加载完成前显示加载指示器，加载完成后显示异步组件的内容。

如果异步组件加载失败，Vue 3 也能够处理错误，你可以在 <Suspense> 组件中添加错误处理逻辑来显示错误信息。

这个示例演示了如何使用 <Suspense> 组件来处理异步组件加载状态，提供更好的用户体验。当加载较慢的组件时，用户将看到加载指示器，而不是空白页面，从而改善了用户体验。