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 组件作为等待状态。