Teleport、Suspense

Teleport

Vue中组件模板属于该组件

通过teleport可以将模板的内容转移到组件之外的其他DOM结构中

<teleport to="body">内容
</teleport>

<teleport to="#app">内容
</teleport>

Suspense

允许应用程序在等待异步组件时渲染一些其它内容,在 Vue2 中，必须使用条件判断(例如 v-if、 v-else等)来检查数据是否已加载并显示一些其它内容；但是，在 Vue3 新增了 Suspense 了，就不必跟踪何时加载数据并呈现相应的内容。
他是一个带插槽的组件，只是它的插槽指定了default 和 fallback 两种状态。
Suspense 使用：

1、使用 <Suspense></Suspense> 包裹所有异步组件相关代码
2、<template v-slot:default></template> 插槽包裹异步组件
3、<template v-slot:fallback></template> 插槽包裹渲染异步组件渲染之前的内容

<template><Suspense><template #default><!-- 异步组件-默认渲染的页面 --><Children :msg="msg" :list="list" @changeMsg="changeMsg"></Children></template><template #fallback><!-- 页面还没加载出来展示的页面 --><div>loading...</div></template></Suspense>
</template><script setup lang="ts"> import {
       ref, reactive, defineAsyncComponent } from 'vue' const Children = defineAsyncComponent(() => import('./Children.vue')) </script>

defineAsyncComponent

• 异步组件声明方法的改变：Vue 3.x 新增一个辅助函数defineAsyncComponent，用来显示声明异步组件
• 异步组件高级声明方法中的 component 选项更名为loader
• loader绑定的组件加载函数不再接收resolve和reject参数，而且必须返回一个Promise

import {
     defineAsyncComponent } from "vue"defineAsyncComponent(() => import("./demo.vue"))defineAsyncComponent({
    loader: () => import("./demo.vue"),loadingComponent: LoadingComponent,errorComponent: ErrorComponent,delay: 200,timeout: 3000
})