vue3之异步组件（defineAsyncComponent）

在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。Vue 提供了 defineAsyncComponent 方法来实现异步加载组件的功能。

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    // ...从服务器获取组件
    resolve(/* 获取到的组件 */)
  })
})
// ... 像使用其他一般组件一样使用 `AsyncComp`


//ES 模块动态导入也会返回一个 Promise，也可以用它来导入 Vue 单文件组件：
const AsyncComp = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
)
//可以全局注册，当然也可以在组件之中定义使用
app.component('MyComponent', defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
))

defineAsyncComponent() 也支持在高级选项中处理错误状态：

const AsyncComp = defineAsyncComponent({
  // 加载函数
  loader: () => import('./Foo.vue'),

  // 加载异步组件时使用的组件
  loadingComponent: LoadingComponent,
  // 展示加载组件前的延迟时间，默认为 200ms
  delay: 200,

  // 加载失败后展示的组件
  errorComponent: ErrorComponent,
  // 如果提供了一个 timeout 时间限制，并超时了
  // 也会显示这里配置的报错组件，默认值是：Infinity
  timeout: 3000
})

defineAsyncComponent定义的异步组件搭配<Suspense>内置组件使用：

<Suspense>
  <!-- 具有深层异步依赖的组件 -->
  <AsyncComp />

  <!-- 异步组件加载没成功之前，在 #fallback 插槽中显示 “正在加载中” -->
  <template #fallback>
    Loading...
  </template>
</Suspense>

//或者...
<Suspense>
  <!-- 主要内容 -->
  <component :is="Component"></component>

  <!-- 加载中状态 -->
  <template #fallback>
    正在加载...
  </template>
</Suspense>

tips: 常常会将 <Suspense> 和 <Transition>、<KeepAlive> 等组件结合。要保证这些组件都能正常工作，嵌套的顺序非常重要。
另外，这些组件都通常与 Vue Router 中的 <RouterView> 组件结合使用。
例如：

<RouterView v-slot="{ Component }">
  <template v-if="Component">
    <Transition mode="out-in">
      <KeepAlive>
        <Suspense>
          <!-- 主要内容 -->
          <component :is="Component"></component>

          <!-- 加载中状态 -->
          <template #fallback>
            正在加载...
          </template>
        </Suspense>
      </KeepAlive>
    </Transition>
  </template>
</RouterView>