Vue3 新的组件

fragment组件

在Vue2中：组件必须有一个根标签

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

teleport组件

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

	

		

			
我是一个弹窗
			关闭弹窗
		
	
 

我们先做这样一个效果

App.vue

Child.vue

Son.vue

Dialog.vue

可以看到当 Son 中的 Dialog 展开时，所有父组件都被撑开了，我们可以用 teleport 将弹框移动到 body 里，展示到屏幕中间

Suspence组件

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

使用步骤： 1、异步引入组件

import {defineAsyncComponent} from "vue";//动态引入
const Child = defineAsyncComponent(()=>import('./components/Child')) 

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

首先演示下异步插件。App 内异步引入 Child 组件

为了清楚的看到效果，我们把网络调成高速3G，然后刷新页面，可以很清楚的看到 App组件先展示出来，然后 Child 组件才展示

这样体验不是太好，我们可以使用 suspence 来解决这个问题，Suspense 是 Vue3 推出的一个内置的特殊组件，有两个 template slot，刚开始会渲染一个 fallback 内容，直到达到某个条件以后才会渲染正式的内容

修改 App.vue 中代码：

刚才除了把网速调慢可以让 Child 晚一点加载出来，或者修改 Child.vue