vue3 suspense

<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('./components/MyComponent.vue'))
  }
};
</script>

解释说明：

1. Suspense 组件：Vue 3 引入了 Suspense 组件，用于处理异步依赖（如异步组件）的加载状态。它可以包裹一个异步组件，并提供一个备用的内容（fallback），在异步组件加载完成之前显示。

2. #default 插槽：这是 Suspense 的默认插槽，用于放置需要异步加载的内容。在这个例子中，我们放置了一个异步组件 AsyncComponent。

3. #fallback 插槽：当异步内容尚未加载完成时，会显示这个插槽中的内容。这里我们简单地显示了一个 "Loading..." 的文本。

4. defineAsyncComponent：这是一个 Vue 提供的函数，用于定义异步组件。它接受一个返回 Promise 的工厂函数，该函数负责加载组件模块。

5. import() 动态导入：使用 ES6 的动态 import() 语法来按需加载组件，从而实现代码分割和懒加载。

通过这种方式，你可以优雅地处理异步组件的加载过程，并为用户提供更好的用户体验。