vue3中异步组件defineAsyncComponent和Suspense的关系

在Vue3中，异步组件可以使用defineAsyncComponent函数进行定义。它会返回一个组件对象，可以在需要时进行动态加载。而Suspense组件则是用于处理异步组件加载时的“等待”状态，它可以显示一个自定义的“等待中”组件，直到异步组件加载完成并渲染出来。

具体来说，在使用defineAsyncComponent定义异步组件时，可以在组件选项中添加loading选项，用于指定Suspense组件中的“等待中”组件。这样，在异步组件加载完成前，Suspense组件会显示loading选项指定的组件，等异步组件加载完成后，再渲染出异步组件。

举个例子，假设我们有一个异步组件如下：

<template>
  <div>异步组件内容</div>
</template>

<script>
export default {
  name: 'AsyncComponent',
  // ... 异步加载组件
}
</script>

我们可以使用defineAsyncComponent函数来定义它，并添加loading选项：

import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent({
  name: 'AsyncComponent',
  loader: () => import('./AsyncComponent.vue'),
  loading: {
    template: '<div>加载中...</div>'
  }
})

然后，在需要使用异步组件的地方，我们可以用Suspense组件包裹：

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>等待中...</div>
    </template>
  </Suspense>
</template>

这样，在异步组件加载完成前，Suspense组件会显示loading选项中的内容；加载完成后，就会渲染出异步组件的内容。