Fragment

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

Teleport

Teleport 包裹的内容可以移动到任意位置。to 属性可以指定标签名，也可以指定某个 DOM 节点 ID

App.vue

<template>
    <Teleport to="body">
        <div class="mark" v-if="isShow">
            <div class="doalog">
                <h3>我是弹窗</h3>
                <h3>我是弹窗</h3>
                <button @click="isShow = false">关闭弹窗</button>
            </div>
        </div>
    </Teleport>
</template>

<!-- 穿梭到 #app Dom 上 -->
<Teleport to="#app"></Teleport>

Suspense

1. 等待异步组件时显示一些提示信息，提高用户体验。
2. 使用异步组件

引入

App.vue

<script>
    import { defineAsyncComponent } from 'vue';
    export default {
        name: 'Vue3App',
        components: {
            Home: defineAsyncComponent(() => import('./components/Home'))
        },
    };
</script>

使用 Suspense 包裹起来，并配置好 default 和 fallback 插槽

App.vue

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