vue3新增的一些组件

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

咱就是说，vue越来越react化了。。。。。

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

	
		
			我是一个d窗
			关闭d窗
		
	

以一个d窗组件为示例来看看：

我们来个嵌套的盒子，然后在最里面的盒子设置d窗

父组件：

 子组件Child：

孙子组件Son:

d窗组件dialog:

给最里面的盒子加了定位，因为相对定位会找他外层最近的定位盒子进行定位，所以效果就是这样了，我们希望这个d窗是在body下呈现的

 我们在Dialog组件中加一个teleport标签

效果就是这样的：

 

3. Suspense

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

用法：

异步引入组件

import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

使用Suspense包裹组件，并配置好default与 fallback 

default：就是组件要显示的内容

fallback：就是组件没加载完全的“备胎”（类似于img标签的alt属性）