fragment

vue2中，每个组件必须有一个根标签包裹。

vue3中，每个组件可以没有根标签，会自动创建一个虚拟标签fragment标签。

teleport

将其槽内容呈现到 DOM 的另一部分。to指定插入位置

<teleport to='body'>
<button>彩色按钮</button>
</teleport>

<teleport to='.box'>
<button>取消按钮</button>
</teleport>

此时，我们可以在html的任何位置写入，会将button放入body标签结构下

三、suspense

等待异步渲染，进行等待样式渲染，提高用户体验

<template>
    <h1>主页面</h1>
    <suspense>
        <template v-solt:default>
            <Child />
        </template>
        <template v-solt:fallback>
            <h2>加载中</h2>
        </template>
    </suspense>
</template>
<script>
import Child from './components/child.vue' //静态引入

import {defineAsyncComponent} from 'vue'
const Child=defineAsyncComponet(()=>import('./components/child.vue')) //动态引入
</script>

当child组件，异步加载数据或网速较慢时，会显示fallback预处理样式，等数据加载完成后，显示default数据