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> 组件来处理异步组件加载状态，提供更好的用户体验。当加载较慢的组件时，用户将看到加载指示器，而不是空白页面，从而改善了用户体验。