vue3中常用的新组件

一、Fragment

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

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

优点：减少标签层级。

二、Teleport（传送门）

作用：将组件的 html 结构移动到指定位置。

用法：

    

        

            
这是弹窗
            关闭弹窗
        
    

三、Suspense

作用：等待异步组件过程中渲染一些额外内容，让用户有更好的体验。

（1）引入异步组件的方式

import { defineAsyncComponent } from 'vue';

const Child = defineAsyncComponent(() => import('./childView.vue'))  // 动态(异步)引入

（2）suspense使用方式

 （3）页面效果