vue3 之 defineAsyncComponent异步加载组件 和 Suspense标签

<template>
  <div class="app">
    我是app组件
    <!-- Suspense要结合defineAsyncComponent使用 -->
    <Suspense>
      <!-- 当网速较慢时，会先展示fallback中的内容，等会再展示default中的内容 -->
      <template v-slot:default>
        <son></son>
      </template>
      <template v-slot:fallback>
        <h3>加载中</h3>
      </template>
    </Suspense>
  </div>
</template>

<script>
// import son from './components/son.vue' //静态引入
import {defineAsyncComponent} from 'vue'
const son =  defineAsyncComponent(() => import('./components/son.vue')) //异步引入
export default {
  name: 'App',
  components: {
    son
  },
}
</script>

<style>
.app {
  background: gray;
  padding: 10px;
}
</style>

<template>
  <div class="son">
      我是son组件
  </div>
</template>

<script>
export default {
  name: 'son',
  setup() {
      return {}
  }
}
</script>

<style>
.son {
  background: skyblue;
  padding: 10px;
}
</style>

注意：当son组件被Suspense包裹时，son组件中setup的返回值可以为promise