1.Fragment
- 在Vue2中: 组件必须有一个根标签
- 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
- 好处: 减少标签层级, 减小内存占用
2.Teleport
-
什么是Teleport?——
Teleport
是一种能够将我们的 组件html结构 移动到指定位置的技术。<teleport to="移动位置"> <div v-if="isShow" class="mask"> <div class="dialog"> <h3>我是一个弹窗</h3> <button @click="isShow = false">关闭弹窗</button> </div> </div> </teleport>
3.Suspense
-
等待异步组件时渲染一些额外内容,让应用有更好的用户体验
-
使用步骤:
-
异步引入组件
import {defineAsyncComponent} from 'vue' const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
-
使用
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>
-
注意:按照上面的代码我们实现了一个异步渲染,此时 Child.vue
的这个异步组件内部的setup可以返回一个Promise实例,也可以用async/await
//采用 返回一个Promise实例
setup() {
const p = new Promise((resolve)=>{
setTimeout(() => {
resolve({
})
}, 1000);
})
return p;
}
//采用 async/await
async setup() {
const p = new Promise((resolve)=>{
setTimeout(() => {
resolve({
})
}, 1000);
})
const data = await p
console.log(data)
return data;
}