vue3 Suspense

在Vue.js 3中，Suspense 是一个用于处理异步组件的特殊组件，它允许你在等待异步组件加载时展示备用内容。这对于优化用户体验、处理懒加载组件或异步数据获取时非常有用。Suspense 的主要目标是简化异步操作的状态管理和展示。

下面是一个简单的例子，演示了如何在Vue.js 3中使用Suspense：

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

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

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

在这个例子中：

• <Suspense> 标签包裹了异步组件 <AsyncComponent>。
• 在<Suspense> 内部，通过使用 <template #default> 来指定当异步组件加载完毕时显示的内容，使用 <template #fallback> 来指定在异步组件加载过程中显示的备用内容，这里是一个简单的 "Loading..." 消息。

当 <AsyncComponent> 被触发加载时，<Suspense> 会渲染 #fallback 内的内容，直到异步组件加载完成。一旦异步组件加载完成，<Suspense> 会切换到显示 #default 内的内容，也就是实际的异步组件内容。

这样，通过使用 Suspense，你可以更容易地处理异步组件的加载状态，而不需要手动管理加载中的状态或添加大量的条件渲染逻辑。