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
})