Teleport组件

Teleport 类似于 react 的 Portals，teleport 翻译过来是心灵传输、远距离传输的意思。

teleport有两个属性：

1. to：指定将其中的内容移动到目标元素，可以使用选择器；
2. disabled：是否禁用 teleport 的功能。
3. 如果多个 teleport 指向同一个选择器，它们会在同一个节点下面共存（兄弟关系）

演示：

<template>
<div id="wide">
    <div>
        <!-- 下面的组件就会挂载到 body 节点下面，而不是挂载到 div 节点下面 -->
        <teleport to="body">
            <组件 />
        </teleport>
        
        <!-- 下面的组件就会挂载到 id选择器wide的div 节点下面，而不是挂载到 div 节点下面 -->
        <teleport to="#wide">
            <h2>哈哈哈</h2>
        </teleport>
    </div>    
</div>
</template>

Suspense组件

截至 2023/1/6 <Suspense> 是一项实验性功能。它不一定会最终成为稳定功能，并且在稳定之前相关 API 也可能会发生变化。

Suspense 组件用于当异步组件没有加载完成时设置另外一个显示内容或者是组件

Suspense 是一个内置的全局组件，该组件有两个插槽：

1. default：如果 default 可以显示，那么显示 default 的内容；
2. fallback：如果 default 无法显示，则显示 fallback 插槽的内容。

<suspense>
    <template #default>
        <async-home></async-home>
    </template>
    
    <template #fallback>
        <h2>Loading</h2>
    </template>
</suspense>

<script setup>
    import { defineAsyncComponent } from 'vue'
    const AsyncHome = defineAsyncComponent(() => import('动态组件的路径'))
</script>