0
点赞
收藏
分享

微信扫一扫

vue3较vue2的特别之处 - fragement/ teleport/ suspense

Fragment

在Vue2中: 组件必须有一个根标签

在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中

好处: 减少标签层级, 减小内存占用

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>

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>

参考地址:

​​​​https://www.kancloud.cn/cookies_fzx/cookie/2548810​​​​

​​​​

​​​​https://juejin.cn/post/7054345738142089246​​​​


​​

举报

相关推荐

0 条评论