04_Vue3其他新的组件

新组件

Fragment 片段

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

Teleport 瞬移

Teleport 提供了一种干净的方法,让组件的html在父组件界面外的特定标签(很可能是body)下插入显示

<!--这样div会在body里面-->
<Teleport to = "body">
    <div>
        hhhhhh
    </div>
</Teleport>

Suspense 不确定

它们允许我们的应用程序在等待异步组件时渲染一些后备内容，可以让我们创建一个平滑的用户体验

//vue3的动态引入组件的写法； 需要引入defineAsyncComponent
const XXX = defineAsyncComponent(
    ()=>import('路径')
)

使用Suspense

<Suspense>
    <!--异步组件-->
    <template #default>
        <XXX>
    </template>
    <!--后备的内容-->
    <template v-slot:fallback>
        <h2>Loading</h2>
    </template>
</Suspense>