teleport标签
我们通过vue创建的项目，最终的html文件，只会有aap那个div标签，所有组件都是基于这个div显示。然而，有时组件模板的一部分逻辑上属于该组件，而从技术角度来看，最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置。
这个标签可以指定将标签内的元素添加到指定位置。
用法：
<teleport to="css选择器">
//想要添加的内容
</teleport>
比如在index.html中，app那个div外添加元素节点，我们先手动创建一个app2的div。
App.vue代码：指定向app2添加内容
<script setup>
let a="666"
</script>
<template>
<teleport to='#app2'>//通过选择器的方式获取
<p>尝试获取数据-----{
{a}}</p>
<div>我是新创建的一个节点，指定到app2内</div>
</teleport>
<template>页面情况，和代码结构：
可以看到在teleport中是可以获取setup中的数据的，我们想要添加的内容也到了app2这个div的内部。
注意：这里teleport属性to指向选定的目标，也可以通过document.body的方式，即既可以用css获取元素的方法，也可以用js获取节点的方法。
suspence标签
这个标签的用途是对异步组件加载时的一种效果优化，其实在vue2.0的时候，高级异步加载组件也可以实现这个效果，但是有点复杂就没有什么人用。
高级异步组件：
const AsyncComponent = () => ({
// 需要加载的组件 (这个 `import` 函数会返回一个 `Promise` 对象。)
component: import('./MyComponent.vue'),
// 异步组件加载时使用的组件
loading: LoadingComponent,
// 加载失败时使用的组件
error: ErrorComponent,
// 展示加载时组件的延时时间。默认值是 200 (毫秒)
delay: 200,
// 如果提供了超时时间且组件加载也超时了，
// 则使用加载失败时使用的组件。默认值是：`Infinity`
timeout: 3000
})
因此vue3.0提出了suspence这个标签，来替代效果。
用法：在suspence内写两个template标签，即就是像具名插槽传数据一样。
如：
<suspense>
<template #default>
<MyChild></MyChild>
</template>
<template #fallback>
<div>
<h1> 正在加载中Loading...</h1>
</div>
</template>
</suspense>
fallback这个插槽的内容为组件异步加载过程中显示的内容，default这个为组件MyChild异步加载成功时显示的内容。
我们在template模板中，写上上述代码后，需要在setup钩子环境中导入这个MyChild组件，
代码：
<script setup>
import { defineAsyncComponent } from "vue"
// import Helloworld from "../components/HelloWorld.vue" //静态引用
let MyChild = defineAsyncComponent(() => import("../components/HelloWorld.vue")) //异步引入
</script>