异步组件与suspense

异步组件：通过延迟加载组件，只有在需要时才会加载它们。

异步组件在大型应用程序中非常有用，因为它们可以减少初始加载时间，并按需加载部分代码。

异步组件的常见使用场景

1. 路由懒加载：在大型单页应用中，将路由对应的组件设置为异步组件，以减少初始加载时间。
2. 按需加载：当页面中某些组件只有在用户触发特定操作时才需要加载时，可以使用异步组件。

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';

// 定义异步组件，并配置加载、错误、延迟和超时
const AsyncComponent = defineAsyncComponent({
  loader: () => import('./components/MyComponent.vue'),
  loadingComponent: () => import('./components/Loading.vue'),
  errorComponent: () => import('./components/Error.vue'),
  delay: 200, // 延迟200毫秒后显示加载组件
  timeout: 3000, // 超时时间为3秒，超时后显示错误组件
  retryWhenFail: true // 组件加载失败时，是否重新尝试加载
});
</script>

<template>
  <div>
    <h1>Vue 3 异步组件示例</h1>
    <AsyncComponent />
  </div>
</template>

Suspense组件是一个非常有用的工具，专门用于处理异步组件的加载和状态管理。

Suspense会等待所有子组件（如 AsyncComponentA 和 AsyncComponentB）加载完成后才会渲染 #default 插槽的内容。

在此期间，#fallback 插槽的内容（例如加载动画）会显示。

<template>
  <div>
    <h1>等待多个异步组件</h1>
    <Suspense>
      <template #default>
        <AsyncComponentA />
        <AsyncComponentB />
      </template>

      <template #fallback>
        <div>加载中...</div>
      </template>
    </Suspense>
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';

// 定义多个异步组件
const AsyncComponentA = defineAsyncComponent(() => import('./components/ComponentA.vue'));
const AsyncComponentB = defineAsyncComponent(() => import('./components/ComponentB.vue'));
</script>