学习Vue3 第十五章（内置组件-异步组件-defineAsyncComponent和Suspense）

异步组件指的是一种在需要时才加载和渲染的组件。这意味着组件不会在应用启动时立即加载，而是在真正需要显示该组件的时候，才会动态的加载它。这种机制可以有效减少初始包的大小，有助于减少应用的初始加载时间，提高加载速度和应用的性能。

Vue3提供了defineAsyncComponent函数来加载异步组件

<template>
  <template>
  <Suspense v-if="flag">
    <Card />
    <template #fallback> loading... </template>
  </Suspense>

  <button @click="flag = true">显示</button>
</template>
<script setup>
import { ref, reactive, defineAsyncComponent } from 'vue'
// import Card from './components/Card.vue'
const Card = defineAsyncComponent(() => import('./components/Card.vue')) // 异步组件
const flag = ref(false)
</script>

<template>
  <slot name="header" :data="name"> </slot>
  <div>22</div>
  <div>{{ name }}</div>
</template>
<script setup>
import { ref } from 'vue'
const name = ref('')

// 模拟异步
const p = function () {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('2')
    }, 2000)
  })
}

name.value = await p()
</script>

Suspense组件有2个插槽，默认插槽会尽快展示出来，如果不能，则展示fallback插槽的节点，相当于骨架屏，

defineAsyncComponent包裹组件，实现组件的按需加载这份组件的js文件,打包的时候,也会单独生成一份js