Vue3 新的组件

一、Fragment

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

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

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

二、Teleport

什么是Teleport?------Teleport是一种能够将我们的组件html结构移动到指定位置的技术

javascript 复制代码
<teleport to="移动位置">
    <div v-if="isShow" class="mask">
        <div class="dialog">
            <h3>我是一个弹窗</h3>
            <button @click="isShow = false">关闭弹窗</button>
        </div>
    </div>
</teleport>

三、Suspense

1、等待异步组件时渲染一些额外内容,让应用有更好的用户体验

2、使用步骤:

相关推荐
浩星8 分钟前
electron系列5:深入理解Electron打包
前端·javascript·electron
患得患失94912 分钟前
【前端WebSocket】心跳功能,心跳重置策略、双向确认(Ping-Pong) 以及 指数退避算法(Exponential Backoff)
前端·websocket·算法
英俊潇洒美少年14 分钟前
React 实现 AI 流式打字机对话:SSE 分包粘包处理 + 并发优化
前端·javascript·react.js
chQHk57BN17 分钟前
前端测试入门:Jest、Cypress等测试框架使用教程
前端
遇见你...26 分钟前
前端技术知识点
前端
AC赳赳老秦37 分钟前
OpenClaw image-processing技能实操:批量抠图、图片尺寸调整,适配办公需求
开发语言·前端·人工智能·python·深度学习·机器学习·openclaw
We་ct44 分钟前
LeetCode 172. 阶乘后的零:从暴力到最优,拆解解题核心
开发语言·前端·javascript·算法·leetcode·typescript
军军君0144 分钟前
数字孪生监控大屏实战模板:可视化数字统计展示
前端·javascript·vue.js·typescript·echarts·数字孪生·前端大屏
此刻觐神1 小时前
IMX6ULL开发板学习-03(Linux文件相关命令)
前端·chrome
吴声子夜歌1 小时前
ES6——Iterator和for...of循环详解
前端·javascript·es6