vue3 新组件
Fragment（片段）
- vue2 中组件必须要一个根表情
- vue3 不需要
- vue3 中没有根标签，内部会将其包裹在
Fragment虚拟元素中（在新版vue.js devtools 审查元素能够看到）
html
<template>
<h2>aaaa</h2>
<h2>aaaa</h2>
</template>Teleport（瞬移）
- to：表示
teleport包裹的元素会插入body标签下。 - 即使在不同的元素下渲染，但组件的父子关系不会变。
vue
<template>
<teleport to="body">
<div class="modal">
这是一个弹窗
</div>
</teleport>
</template>也可以使用选择器
html
<teleport to="#modals">
<div>A</div>
</teleport>
<teleport to="#modals">
<div>B</div>
</teleport>
<!-- 输出 -->
<div id="modals">
<div>A</div>
<div>B</div>
</div>Suspense（不确定）
- 在子组件异步加载之前，可以先显示后背内容
父组件
vue
<template>
<Suspense>
<template #default>
<son />
</template>
<template #fallback>
<h1>加载中...</h1>
</template>
</Suspense>
</template>son 子组件
vue
<template>
<h2>
{{data}}
</h2>
</template>
<script>
export default {
setup () {
// 注意此处 setup 返回的是 Promise 对象
return new Promise(res => {
setTimeout(() => {
res({data: '加载完成'})
}, 2000);
})
}
}
</script>