Fragment组件和Teleport组件以及Suspense组件

Fragment组件

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

Teleport组件

Teleport组件
什么是Teleport？ -- Teleport是一种能够将我们的组件html结构移动到指定位置的技术

具体案例代码如下：实现一个对话框，位置应该展示body内
点我开启弹窗



    

    ...
    点我关闭弹窗



最终在控制台上看的结构：

    ...

    
    

    ...
    点我关闭弹窗


备注：to不一定只能写在body，比如你创建一个
, 那么可以写成to="#box"

Suspense组件

1. 异步引入组件：
import {defineAsyncComponent} from 'vue';
const ChildC = defineAsyncComponent(() => import('./components/ChildC'))

2. 使用Suspend包裹组件，并配置好default与fallback

具体案例代码如下：