• Suspense是一个内置组件，不用引入，可以直接使用

• Suspense 可以等待的异步依赖有两种：1. 异步组件(vue官网中有)  2. 带有异步 setup() 钩子的组件。这也包含了使用 <script setup> 时有顶层 await 表达式的组件(其实就是一进来await请求初始化数据的情况)

• Suspense内有两个插槽，一个默认插槽(需要展示的组件)，一个名为fallback的具名插槽(做loading效果)

• 应用： 组件加载过慢时，可以整个提示，提示用户加载中

<template>
  <h3>我是App组件</h3>
  <Son></Son>
  <p>vue内置组件Suspense,不需要引入，直接使用</p>
  <Suspense>
    <!-- 真正要展示的组件 -->
    <template v-slot:default>
      <Child />
    </template>
    <!-- 等待的loading -->
    <template v-slot:fallback>
      <h3>加载中...</h3>
    </template>
  </Suspense>
</template>

<script setup>
// 静态引入
import Son from './components/Son.vue'
// 动态引入(又叫异步引入),动态加载，走到引入组件那行代码的时候才引入
import { defineAsyncComponent } from 'vue'
const Child = defineAsyncComponent(() => {
  return import('./components/Son.vue')
})
</script>

注意：这是一个实验的特性，以后可能会进行修改