vue3--(异步组件)

1.异步组件使用场景：vue为单页面应用，同步加载大量的页面代码会导致页面长时间处于空白情况。

<template>
  <div id="center">
    <span>我是主体内容部分</span>
    <Suspense>
      <template #default>
        <C></C>
      </template>
      <template #fallback>
        <div>正在加载中，请稍等。。。。</div>
      </template>
    </Suspense>
  </div>
</template>
<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue';
const C = defineAsyncComponent(() => import('./C.vue'));
</script>
<style scoped>
#center {
  width: 100%;
  height: 100%;
  background: seagreen;
  text-align: center;
  font-size: 20px;
}
</style>