【Vue3】Fragment组件、Teleport组件和Suspense组件

Fragment组件

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

在Vue3中：组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中

好处：减少标签层次，减少内侧占用

 

Teleport组件

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

   

     

       
我是一个弹窗
       关闭弹窗
     
   

Suspense组件

等待异步组件时渲染一些后备内容，获得更好的用户体验

使用步骤：

异步引入组件：

原来的静态引入子组件，在页面中所有的页面会一起出来，并且随着最慢的组件的时间，如果异步加载引入，就可以先出现最外层组件，然后再出现子组件。 

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

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

利用插槽，当还没加载出子组件时，就可以先出现fallback里的内容，可以提示用户还有子组件没有加载出来。