Vue3.4的新变化

2024-01-04

解析器

3.4版本解析器速度提升2倍,提高了 SFC 构建性能。
之前版本Vue 使用递归下降解析器,该解析器依赖于许多正则表达式和前瞻搜索。新的解析器使用基于htmlparser2中的标记生成器的状态机标记生成器,它仅迭代整个模板字符串一次。

响应式上

3.4 还对响应式系统进行了重大重构,目标是提高计算属性的重新计算效率。

const count = ref(0)
const isEven = computed(() => count.value % 2 === 0)

watchEffect(() => console.log(isEven.value)) // logs true

count.value = 2 // logs true again
  1. 之前版本的watchEffect每次count.value更改都会触发回调,即使计算结果保持不变。通过 3.4 后的优化,现在仅当计算结果实际发生更改时才会触发回调。
  2. 多个计算的依赖 dep 更改仅触发同步效果一次。
  3. Array shift, unshift,splice方法仅触发一次同步效果。

defineModel

defineModel是一个新的

//  1.声明一个modelValue的属性,消费父组件v-model绑定的值
const model = defineModel()
// 可以携带options
const model = defineModel({ type: String })

// 现在直接修改值.value即可,相当于调用了emits "update:modelValue" 
model.value = 'hello'

// 声明父组件绑定的v-model:count='xxx'
const count = defineModel('count')
// 2。定义type和默认值
const count = defineModel('count', { type: Number, default: 0 })
// 3.如果我们想获取v-model添加的修饰符,子组件中可以解构出来,第二个参数就是修饰符
const [modelValue, modelModifiers] = defineModel()
// 父组件v-model.trim='xxxx' 子组件eg:  modelModifiers.trim

//4.当存在修饰符时,我们可能需要在读取或将其同步回父元素时对其值进行转换。我们可以通过使用get和set转换器选项来实现这一点:
const [modelValue, modelModifiers] = defineModel({
  // get() 可以省略
  set(value) {
    // 如果trim修饰符存在就将值去掉作用空格返回同步回父组件
    if (modelModifiers.trim) {
      return value.trim()
    }
    return value
  }
})

v-bind同名缩写

const id = ref('23213')
const name = ref('name')
<Test :id :name>

主要的更新就是以上这些了~

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue3.4的新变化 的相关文章

  • 无法显示由 Fine-uploader 上传到 Amazon s3 的图像

    我现在尝试设置fineuploader s3以显示在aws服务器上成功上传的文件的图像 如示例页面上所做的那样 http fineuploader com s3 demo http fineuploader com s3 demo 我 仍然
  • jQuery 中的 Javascript .files[0] 属性

    jQuery 中是否有与此语句等效的语句 var value document getElementById id files 0 使用附加 files 0 的标准 jQuery 选择器似乎不起作用 并且我找不到与 files 等效的 jQ
  • ant-d upload中如何为removeFile添加PopConfirm一个图片文件

    我正在使用 Ant d Upload 通过本地系统上传文件 然后单击文件预览图像上的删除图标 图像文件将被删除 我想添加一个弹出确认 所以我尝试在 onRemovefunction 中添加确认作为承诺但它不起作用 它在浏览器中显示警报 on
  • Ember.JS - 如何在同一页面中使用多个模型、控制器和视图?

    我主要了解 Ember JS 的基础知识 大多数示例实际上只处理单个控制器和模型以在页面上显示某些内容 我真的很想用 Ember 构建一个完整的 Web 应用程序 所以有人能告诉我如何组织和连接多个控制器 模型和视图到一个页面中吗 例如 如
  • 保存/导出Chrome的JavaScript控制台输入历史记录

    无论如何 我可以保存或导出 JavaScript 控制台的历史记录吗 input 控制台历史记录 在 Google Chrome 中 我不想保存输出或错误 因此将鼠标悬停在控制台框上 右键单击并选择Save as 不是解决方案 我不想每次都
  • 如何切换各个
  • 元素的类?
  • 当我切换变量时active在下面的代码中 activeCSS 类应用于列表中的所有元素 从列表中的所有元素中删除 如何单独定位列表元素 Todo List 示例具有类似的功能 待办事项 待办事项已完成 但它有点超出了我的技能范围 ul li
  • iframe 重新加载按钮

    我浏览了很多网站 但似乎没有一个能正常工作 或者我不明白它们 我想要一个刷新某个 iframe 的简单按钮 该按钮将位于父页面上 并且 iframe 名称为 Right 有很多方法可以做到这一点 假设这个iframe markup 我们可以
  • KeyboardEvent.keyCode 已弃用。这在实践中意味着什么?

    根据 MDN 我们绝对应该not正在使用 keyCode财产 它已被弃用 https developer mozilla org en US docs Web API KeyboardEvent keyCode https develope
  • 如何从顺序键盘导航中删除 Vuetify 附加图标

    在带有 Vuetify 的 Vue js 应用程序中 我有一组用v text field并且其中有一个append icon为了切换文本可见性 如下所示
  • 如何清除WebGL中的矩形区域?

    WebGL 有一个clear清除整个表面的方法 清除表面的特定矩形的最佳方法是什么 例如 我想将一个从 50 50 开始的 100x100 像素框设置为全零 ARGB 0 0 0 0 我现在能想到的就是用一个写入零的片段着色器绘制一个四边形
  • Flux + React.js - 操作中的回调是好还是坏?

    让我解释一下我最近遇到的问题 我有 React js Flux 驱动的应用程序 有一个列表显示文章数量 注意 应用程序中有多个不同的列表 和文章详情查看在里面 但每个列表只有一个 API 端点 它返回文章数组 为了显示我需要的详细信息fin
  • 选中复选框时提交表单

    有没有办法在选中复选框时提交表单
  • 是否可以使用打字稿映射类型来创建接口的非函数属性类型?

    所以我正在研究 Typescript 的映射类型 是否可以创建一个接口来包装另一种类型 从而从原始类型中删除函数 例如 interface Person name string age number speak void type Data
  • 如何在网页上实现文件上传进度条?

    当用户将文件上传到我的网络应用程序时 我想显示比动画 gif 更有意义的内容 我还有哪些可能性 编辑 我正在使用 Net 但我不介意是否有人向我展示与平台无关的版本 如果您对这一切在客户端通常如何工作感兴趣 就是这样 所有解决方案都通过 J
  • window.showModalDialog 的等效跨浏览器解决方案是什么?

    window showModalDialog 的等效跨浏览器解决方案有哪些 showModalDialog 在 IE 和 FF 3 中引入 我个人认为没有 但是有很多 UI 工具包提供了这样的功能 例如jQuery UI http jque
  • 加载另一个 JS 脚本后加载

    这是我的代码 very big js file lots of html stuff 问题是 这些是异步加载的 有没有办法等待第二个脚本直到第一个脚本加载 如果您使用 jQuery 有一个非常简单的方法可以通过获取脚本 https api
  • ES6 模板文字的延迟执行

    我正在玩新的ES6 模板文字 http tc39wiki calculist org es6 template strings 我首先想到的是String format对于 JavaScript 所以我开始实现一个原型 String pro
  • 您如何看待引导模式触发器的相应回调?

    On 引导模态 http getbootstrap com javascript modals 我们知道我们可以为触发器绑定事件 例如show or hide using show shown hide hidden 但此事件绑定仅适用于一
  • 在javascript中动态生成行?

    我是 javascript 新手 我想在按下 Tab 时动态生成行 并希望获取在动态生成的行中输入的值 以便我可以在 servlet 代码中使用这些值 这是我的html
  • 在 javascript 中使用 xPath 解析具有默认命名空间的 XML

    我需要创建一个 XML xPath 解析器 所有解析都必须在客户端进行 使用 JavaScript 我创建了一个 javascript 来执行此操作 在默认名称空间发挥作用之前 一切看起来都正常 我根本无法查询具有默认命名空间的 XML 我

随机推荐

  • Win7系统提示找不到KBDUKX.DLL文件的解决办法

    其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题 如果是新手第一时间会认为是软件或游戏出错了 其实并不是这样 其主要原因就是你电脑系统的该dll文件丢失了或没有安装一些系统软件平台所需要的动态链接库 这时你可以下载这个KBDUKX
  • Win7系统提示找不到KBDUR.DLL文件的解决办法

    其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题 如果是新手第一时间会认为是软件或游戏出错了 其实并不是这样 其主要原因就是你电脑系统的该dll文件丢失了或没有安装一些系统软件平台所需要的动态链接库 这时你可以下载这个KBDUR D
  • [每周一更]-(第56期):不能不懂的网络知识

    作为程序员 在网络方面具备一定的知识和技能是非常重要的 以下是一些程序员需要熟练掌握的网络知识 基础网络概念 IP地址 了解IPv4和IPv6地址的格式和分配方式 以及常见的IP地址分类 子网掩码 理解子网掩码的作用 以及如何计算子网的大小
  • Win7系统提示找不到KBDUR1.DLL文件的解决办法

    其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题 如果是新手第一时间会认为是软件或游戏出错了 其实并不是这样 其主要原因就是你电脑系统的该dll文件丢失了或没有安装一些系统软件平台所需要的动态链接库 这时你可以下载这个KBDUR1
  • Java版直播商城免 费 搭 建:平台规划与常见营销模式,电商源码、小程序、三级分销及详解

    saas云平台 打造全行业全渠道全场景的saas产品 为经营场景提供一体化解决方案 门店经营区域化 网店经营一体化 本地化 全方位 一站式服务 为多门店提供统一运营解决方案 提供丰富多样的营销玩法覆盖所有经营场景 助力商家成功 系统稳定压倒
  • 对 pcl::StatisticalOutlierRemoval 滤波器的理解

    对 pcl StatisticalOutlierRemoval 滤波器的理解 注 以下内容基于与 GPT 4 的交流并结合个人理解整理而成 若有描述不准确或模糊之处 欢迎指正 参数配置 setMeanK int meanK 此参数设置每个点
  • Win7系统提示找不到KBDUSA.DLL文件的解决办法

    其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题 如果是新手第一时间会认为是软件或游戏出错了 其实并不是这样 其主要原因就是你电脑系统的该dll文件丢失了或没有安装一些系统软件平台所需要的动态链接库 这时你可以下载这个KBDUSA
  • Docker无法启动Postgresql容器

    目录 问题描述 解决问题 问题描述 拉取了一个Postgresql14 2的镜像 在 docker run 创建并运行容器之后使用 docker ps 发现容器没有跑起来 再次使用 docker start 也没跑起来 docker run
  • 太强了!利用 Python 连接 ES 查询索引某个字段命中数的脚本!

    当我们在工作中 如果频繁查询 Elasticsearch 某个索引中的某个字段命中的记录数量时 可以通过 Python 的 Elasticsearch 库来查询 从而提升工作效率 代码大致思路如下 第一步 从 elasticsearch 模
  • Java版企业电子招标采购系统源码——鸿鹄电子招投标系统的技术特点

    在数字化时代 采购管理也正经历着前所未有的变革 全过程数字化采购管理成为了企业追求高效 透明和规范的关键 该系统通过Spring Cloud Spring Boot2 Mybatis等先进技术 打造了从供应商管理到采购招投标 采购合同 采购
  • 德思特应用 | 革新MIMO无线电测试,精准测量10 MHz-8 GHz复杂射频信号!(二)

    来源 德思特测量测试 德思特应用 革新MIMO无线电测试 精准测量10 MHz 8 GHz复杂射频信号 二 原文链接 https mp weixin qq com s ScYnA3 09XT3Gp6SRg1n4Q 欢迎关注虹科 为您提供最新
  • NetCore Webapi XSRF/CSRF 跨站请求伪造过滤中间件

    XSRF Cross Site Request Forgery 和CSRF Cross Site Request Forgery 是一种常见的网络攻击方式 攻击者通过伪造请求将恶意操作发送到用户正在访问的网站 为了防止这种攻击 可以采取以下
  • 移植useradd到嵌入式Linux设备

    友情提示 前面一大段描述的是在老版本Ubuntu14 4交叉编译新版本shadow 过程曲折 没有结果 分割线后面一段是重新换了一个较老版本shadow 4 4 过程丝滑 结果喜人 诸君如耐心有限可直接划拉至分割线后部分内容 对于其他程序的
  • 如何查看电脑使用记录?分享4个可行方法!

    我在使用电脑时突然想查看一下电脑之前的使用记录 但是不知道应该怎么操作 有没有朋友知道应该怎么做呢 在日常生活和工作中 我们经常需要查看电脑的使用记录 例如访问过的网站 运行过的程序 文档编辑历史等 如何查看电脑使用记录呢 本文将给大家分享
  • Win7系统提示找不到KBDUGHR1.DLL文件的解决办法

    其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题 如果是新手第一时间会认为是软件或游戏出错了 其实并不是这样 其主要原因就是你电脑系统的该dll文件丢失了或没有安装一些系统软件平台所需要的动态链接库 这时你可以下载这个KBDUGHR
  • 如何无需公网IP实现远程访问Windows本地WebDAV服务中存储文件

    文章目录 1 安装IIS必要WebDav组件 2 客户端测试 3 cpolar内网穿透 3 1 打开Web UI管理界面 3 2 创建隧道 3 3 查看在线隧道列表
  • BMS开发之面向对象思想(adbms1818)

    借鉴adbms1818的底层驱动代码 前言 adbms1818的主要用途就是不同种类的寄存器里面存储不同的数据 程序员需要通过特定的协议往寄存器里面写入或者读出数据 1 定义一个结构体 里面存储了adbms1818的所有寄存器的信息 然后我
  • SpringCloud之Eureka组件工作原理详解

    Eureka是一种服务注册与发现组件 最初由Netflix开发并开源出来 它主要用于构建分布式系统中的微服务架构 并提供了服务注册 服务发现 负载均衡等功能 在本文中 我们将详细解释Eureka的工作原理 一 Eureka概述 Eureka
  • 《知识扫盲》ROS和ROS2对比

    文章摘选自 ROS与ROS2对比 1 ROS问题举例 ROS的设计目标是简化机器人的开发 如何简化呢 ROS为此设计了一整套通信机制 话题 服务 参数 动作 通过这些通信机制 ROS实现了将机器人的各个组件给的连接起来 在设计这套通信机制的
  • Vue3.4的新变化

    解析器 3 4版本解析器速度提升2倍 提高了 SFC 构建性能 之前版本Vue 使用递归下降解析器 该解析器依赖于许多正则表达式和前瞻搜索 新的解析器使用基于htmlparser2中的标记生成器的状态机标记生成器 它仅迭代整个模板字符串一次