一、Fragment

vue2中，组件必须有一个根标签

vue3中，组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中。

优点：减少标签层级。

二、Teleport（传送门）

作用：将组件的 html 结构移动到指定位置。

用法：<teleport to="指定位置"><teleport>

<teleport to="body"><div v-if="isshow" class="mask"><div class="dialog"><h3>这是弹窗</h3><button @click="isshow = false">关闭弹窗</button></div></div>
</teleport>

三、Suspense

作用：等待异步组件过程中渲染一些额外内容，让用户有更好的体验。

（1）引入异步组件的方式

import { defineAsyncComponent } from 'vue';const Child = defineAsyncComponent(() => import('./childView.vue'))  // 动态(异步)引入

（2）suspense使用方式

<suspense><!-- 加载完成后展示的 --><template v-slot:default><Child></Child></template><!-- 加载过程中展示的 --><template v-slot:fallback><h2>稍等，正在加载...</h2></template>
</suspense>

 （3）页面效果