Vue3新组件：Fragment、Teleport、Suspense

Fragment、Teleport和Suspense是Vue.js 3 中的新特性，用于更好地组织和管理组件的结构和交互。

Fragment

Fragment（片段）允许我们在不需要额外的包裹元素的情况下渲染多个组件。在 Vue2中，模板中的多个组件必须被一个父元素包裹起来，以便能够正确地进行渲染。而在 Vue3 中，可以使用 Fragment 来将多个组件直接列在一起，而无需添加多余的 DOM 元素。

<template>
  <Fragment>
    <ComponentA />
    <ComponentB />
    <ComponentC />
  </Fragment>
</template>

Teleport

Teleport（传送门）允许我们将组件的内容渲染到任意的 DOM 元素中，而不局限于组件所在的父级元素。这在处理模态框、弹出窗口等需要脱离当前组件的 DOM 结构的场景中非常有用。

<template>
  <Teleport to="body">
    <ModalComponent />
  </Teleport>
</template>

Suspense

Suspense用于处理异步组件加载过程中的等待状态。它可以在异步组件加载完成之前，显示一个指定的等待组件，以提供更好的用户体验。

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <LoadingSpinner />
    </template>
  </Suspense>
</template>

这里的 AsyncComponent 是一个异步加载的组件，在加载完成之前，将会显示 LoadingSpinner 组件作为等待状态。