vue3 异步加载组件

在Vue3中，可以使用`defineAsyncComponent`函数来实现异步加载组件。具体步骤如下：

1. 创建一个异步组件，例如`AsyncComponent.vue`：

<template>
  <div>
    <h2>这是一个异步组件</h2>
  </div>
</template>

<script>
export default {
  name: 'AsyncComponent',
}
</script>

2. 在需要使用异步组件的地方，使用`defineAsyncComponent`函数来定义异步组件：

<template>
  <div>
    <h1>这是一个父组件</h1>
    <AsyncComponent />
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
)

export default {
  name: 'ParentComponent',
  components: {
    AsyncComponent,
  },
}
</script>

在上面的代码中，`defineAsyncComponent`函数接受一个返回`Promise`的函数作为参数，该函数返回的`Promise`会在组件需要被渲染时被解析。

3. 运行代码，可以看到异步组件被成功加载并渲染。