Vue3中的新组件

1.Fragment

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

2.Teleport

是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

用法：一个组件模板的一部分在逻辑上从属于该组件，但从整个应用视图的角度来看，它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方。

<teleport to="body">
    <div>
        我是一个弹窗。
    </div>
</teleport>

//闪送到id名为dialog稍微元素内
<teleport to="#dialog">
    <div>
        我是一个弹窗。
    </div>
</teleport>

详见官网示例

3.Suspense

用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。

 

<template>
    <div>
        <h1>父组件</h1>
        <Suspense>
            //当default插槽中内容还没加载出来时，就会显示fallback中的内容
            <template v-slot:default>
                <Child/>
            </template>
            <template v-slot:fallback>
                <h3>加载中。。。</h3>
            </template>
        </Suspense>
    </div>
</template>
<script>
    import {defineAsyncComponent} from 'vue'
    const Child = defineAsyncComponent(()=>import('./components/Child'))//异步引入
    export default {
    
        components:{Child}

    }
</script>