vue3 新特性--新组件

1. Fragment（片段）

• 在 vue2 中：组件必须有一个根标签
• 在 vue3 中：组件可以没有根标签，内部会将多个标签包含在一个 Fragment 虚拟元素中
• 好处：减少标签层级，减小内存占用

2. Teleport（瞬移）

• Teleport 是一种能够将组件的 html 结构移动到指定位置的技术

<!-- to 目标需要一个 CSS 选择器字符串或一个实际的 DOM 节点 -->
<teleport to="body">
	<div v-if="isShow" class="mask">
		<div class="dialog">
			<h3>我是一个弹窗</h3>
			<button @click="isShow = false">关闭弹窗</button>
		</div>
	</div>
</teleport>

3. Suspense（不确定的）

• 作用：等待异步组件时渲染一些额外内容，让应用有更好的用户体验
• 使用步骤：

1. 异步引入组件

import { defineAsyncComponent } from 'vue'
const Child = defineAsyncComponent(() => import('./components/Child.vue'))

2. 使用 Suspense 包裹组件，并配置好 default 和 fallback

<template>
	<div class="app">
		<h3>我是App组件</h3>
		<Suspense>
			<template v-slot:default>
				<Child/>
			</template>
			<template v-slot:fallback>
				<h3>加载中.....</h3>
			</template>
		</Suspense>
	</div>
</template>