新的组件

Fragment - 文档碎片

• 在Vue2中：组件必须有一个根标签
• 在Vue3中：组件可以没有根标签， 内部会将多个标签包含在一个Fragment虚拟元素中
• 好处：减少标签层级, 减小内存占用

Teleport - 瞬移组件的位置

• 一种能够将我们的组件html结构移动到指定位置的技术。

<teleport to="移动位置"> //to就是将下列代码转移到那个里面
    <div v-if="isShow" class="mask">
        <div class="dialog">
            <h3>我是一个弹窗</h3>
            <button @click="isShow = false">关闭弹窗</button>
        </div>
    </div>
</teleport>

Suspense - 异步加载组件的 loading 界面

• 等待异步组件时渲染一些额外内容，让应用有更好的用户体验。

<!-- 步骤 1.异步引入组件 -->
<script>
import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
</script>
<!-- 步骤 2.使用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>