vue3 异步组件的使用

<template>
  <div>
    <h1>App</h1>
    <hr />
    <Component1 />
    <asyncComponent />
    <asyncComponentOptions />
  </div>
</template>

<script setup>
import ErrorPage from "@/components/ErrorPage.vue";
import LoadingPage from "@/components/LoadingPage.vue";
import { defineAsyncComponent } from "vue";

// 同步写法
import Component1 from "@/components/Component1.vue";

// 异步写法
const asyncComponent = defineAsyncComponent(() =>
  import("@/components/Component1.vue")
);
// const asyncComponent = () => import('@/components/Component1.vue') // vue2 写法

// 带配置项异步写法
const asyncComponentOptions = defineAsyncComponent({
  loader: () => import("@/components/Component1.vue"),
  delay: 300,
  timeout: 5000,
  errorComponent: ErrorPage,
  loadingComponent: LoadingPage,
});
</script>