Fragment
- 在vue2中,组件必须有一个根标签
- 在vue3中,组件可以没有根标签,内部会将多个标签包含在一个Fragment虚拟元素中。
- 好处:减少标签层级,减小内存占用
Teleport:传送
- Teleport是一种能够将我们的组件html结构移动到指定位置的技术
实例-模拟模态框
要求: 在Son组件中添加一个div,点击按钮出现此div模拟出弹框效果
问题: 但是发现弹框会将组件撑开,无法达到预期效果
解决方法:
<template>
<div class="container">
<h1>我是Son组件---{
{ name }}-{
{ price }}</h1>
<button @click="isShow = true" type="button">点击出弹框</button>
<teleport to="body" v-if="isShow">
<div class="mask">
<div class="dialog">
<span @click="isShow = false" class="closeBtn">X</span>
<hr />
<span> 我是弹框</span>
</div>
</div>
</teleport>
</div>
</template>
Suspense
-
等待异步组件时渲染一些额外内容,让应用有更好的用户体验
-
使用步骤:
- 异步引入组件
const Child = defineAsyncComponent(()=>import("./components/Child.vue"))
- 使用Suspense包裹组件,并配置好default与fallback
<template> <div class="appContainer"> <h1>我是APP组件---{ { name }}-{ { price }}</h1> <Suspense> <template v-slot:default> <Child></Child> </template> <template v-slot:fallback> <h1>请稍后</h1> </template> </Suspense> </div> </template>