vue3中常用的新组件

一、Fragment

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

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

优点：减少标签层级。

二、Teleport（传送门）

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

用法：<teleport to="指定位置"><teleport>

<teleport to="body">
    <div v-if="isshow" class="mask">
        <div class="dialog">
            <h3>这是弹窗</h3>
            <button @click="isshow = false">关闭弹窗</button>
        </div>
    </div>
</teleport>

三、Suspense

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

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

import { defineAsyncComponent } from 'vue';

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

（2）suspense使用方式

<suspense>
    <!-- 加载完成后展示的 -->
    <template v-slot:default>
        <Child></Child>
    </template>
    <!-- 加载过程中展示的 -->
    <template v-slot:fallback>
        <h2>稍等，正在加载...</h2>
    </template>
</suspense>

 （3）页面效果