新的组件

1. Fragment

• Vue2：组件必须有一个根标签
• Vue3：组件可以没有根标签，内部会将多个标签包含在一个 Fragment 虚拟元素中
• 减少标签层间，性能优化

2. Teleport

• 概念：将 组件html结构 移动到指定位置

  <teleport to="body">
      <div v-if="isShow" class="mask">
          <div class="dialog">
              <h3>你好</h3>
              <h4>孙笑川</h4>
              <h4>药水哥</h4>
              <h4>Giao哥</h4>
              <button @click="isShow = false">关闭弹窗</button>
          </div>
      </div>
  </teleport>

3. Suspense

• 等待异步组件时渲染定义的缺省内容，提升用户体验

• 实现：

  • 引入异步组件

  import {defineAsyncComponent} from "vue";
  const Child = defineAsyncComponent(() => import('./components/Child'))

  • 使用 Suspense 包裹组件，并配置好 default 和 fallback

  <template>
    <div class="app">
      <h3>App组件</h3>
    <Suspense>
        <template v-slot:default>
          <Child/>
        </template>
        <template v-slot:fallback>
          <h3>加载中...</h3>
        </template>
      </Suspense>
    </div>
  </template>