vue3异步代码块加载加上Suspense

<template>
// 可以在异步组件没有加载或者加载失败的情况下显示想要的加载中模块
 <Suspense>
 	//  失败的状态
    <template #fallback>
      <h1>正在加载</h1>
    </template>
    // 成功的状态
    <template #default>
      <asyncCom />
    </template>
  </Suspense>
  <AsyncComponent />
</template>

<script>
// 局部注册异步代码块
import { defineAsyncComponent } from "vue";
// eslint-disable-next-line
let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(import(/*webpackChunkName:'asyncCom'*/ "./AsyncCom.vue"));
  }, 2000);
});
let asyncCom = defineAsyncComponent(() => p);
export default {
  data() {
    return { };
  },
  components: {
    // asyncCom,
    AsyncComponent: defineAsyncComponent(() =>
      import(/*webpackChunkName:'asyncCom'*/ "./AsyncCom.vue")
    ),
  },
};
</script>