Vue3 新增标签

fragment 标签 --> 包裹标签
vue3 支持组件内的 HTML 结构不包含在一个根标签内的写法，实现方式就是在最外层包裹着一层 fragment 标签，在最终渲染时，又将 fragment 标签进行了删除。
可以有效优化 HTML 结构

Teleport 标签 --> 传送标签

将组件内的某一部分结构传送到其他组件的指定位置进行展示

<template>
  <button>显示</button>
  <!-- to 属性指定传送到的HTML结构位置，可以使用类选择器 -->
  <teleport to="body">
    <!-- 此处的结构将被插入到 body 根标签位置 -->
  </teleport>
</template>

对于需要使用定位的元素，可以使用此标签进行包裹，会将包裹的内部结构插入到指定的区域进行展示

Suspense 标签
用于异步加载的组件，在异步组件加载完成前和加载完成后，显示不同的页面内容，避免异步组件加载完成后，突然的出现，造成页面的抖动效果

JS 定义异步组件

// 引入异步组件API
import { defineAsyncComponent } from "vue";

// 定义异步组件 A
const A = defineAsyncComponent(() => import("./组件URL.vue"));

export default {
  // 注册异步组件 A
  components: { A },
};

HTML 定义 Suspense 标签

<template>
  <div></div>
  <!-- 定义 Suspense 标签 -->
  <Suspense>
    <!-- 插槽一 -->
    <template v-solt:defaute>
      <!-- 异步组件加载完成后，在 Suspense 插槽位置展示的内容 -->
    </template>

    <!-- 插槽二 -->
    <template v-solt:fallback>
      <!-- 异步组件加载完成前，在 Suspense 插槽位置展示的内容 -->
    </template>
  </Suspense>
</template>

实现原理就是利用插槽 solt ，在加载完成前和加载完成后展示不同的插槽内容。加载完成前对应的插槽名称为: fallback , 加载完成后对应的插槽名称为: default

使用异步组件引入的方式和 Suspense 标签时，可将 setup 函数的返回值写为 Promise 对象或者 await 和 async 修饰符，而同步组件时，setup 函数的返回值不能为 Promise 对象。

# Vue3 新增标签

Vue3 新增标签