Vue3 异步组件的使用

Vue3 中 使用 defineAsyncComponent 定义异步组件，配置选项 component 替换为 loader ，用法如下：

<template>
  <!-- 异步组件的使用 -->
  <AsyncPage />
</tempate>

<script>
import { defineAsyncComponent } from "vue";

export default {
  components: {
    // 无配置项异步组件
    AsyncPage: defineAsyncComponent(() => import("./NextPage.vue")),
    // 有配置项异步组件
    AsyncPageWithOptions: defineAsyncComponent({
	  loader: () => import(".NextPage.vue"),
	  delay: 200, 
	  timeout: 3000,
	  errorComponent: () => import("./ErrorComponent.vue"),
	  loadingComponent: () => import("./LoadingComponent.vue"),
	})
  },
}
</script>