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的新变化 的相关文章

  • 上传到google脚本中的特定文件夹

    所以我想制作一个表单 将文件 照片 视频上传到 Google Drive 中的特定文件夹 文件 照片 视频 但我不知道如何在 Google Apps 脚本中制作 我尝试了这样的操作 并在控制台中出现错误 无效的参数侦听器 所以这里有一个索引
  • 如何使用 jasmine.js 测试控制台输出?

    我正在研究文本 面向 Web 开发人员的专业 JavaScript 作者 Nicholas Zakas我正在使用 Jasmine js 测试这些示例 目前 我可以通过指定返回值来测试函数的输出 但是当我想要返回多条数据时 我会遇到麻烦 教科
  • 今天(儒勒·凡尔纳)的 Google 涂鸦是如何运作的?

    相信很多人都已经看过今天的了 2011 02 08 谷歌的涂鸦 http www google com logos verne html 如果涂鸦发生变化 请链接到 CNN 上的文章 http edition cnn com 2011 TE
  • Canvas drawImage 内联 svg 在 Firefox 上不起作用

    这是一个例子 它采用 svg 并将其转换为画布 http jsfiddle net Na6X5 944 http jsfiddle net Na6X5 944 var can document getElementById canvas1
  • 如何使用 jQuery 检查文件输入大小?

    我有一个具有文件上传功能的表单 如果用户尝试上传的文件太大 我希望能够有一些不错的客户端错误报告 是否有一种方法可以使用 jQuery 检查文件大小 或者纯粹是在客户端上或以某种方式将文件发送回服务器进行检查 您实际上无权访问文件系统 例如
  • 如何从客户端设置 HTMLEditorExtender HTML

    我无法让它工作 这是我在另一个线程中找到的代码 但它对我不起作用 我得到 set content 不是函数 find set content whatever 这仍然有效吗 我还尝试设置它扩展的文本框的值 尝试设置两者的 InnerHtml
  • 获取预转译源代码的 Karma 代码覆盖率

    我使用 Karma 来运行测试 使用 webpack 来捆绑文件 并使用 babel 进行 es6 gt es5 转译 我已经运行了测试并生成了代码覆盖率 但代码覆盖率数字是针对转译后的源文件的 是否有办法获得原始源文件的代码覆盖率 我尝试
  • 数字和数字对象有什么区别?

    存储在普通变量中的数字有什么区别 var foo 5 和一个数字对象 var bar new Number 5 数字对象可以用来做什么 A Number对象包含一些有用的方法和属性 例如 数字对象方法 Method Description
  • 如果重复,则从数组中删除两个值 - JavaScript/jQuery

    我这里有一个数组 var myArr 1 1 2 5 5 7 8 9 9 现在我想删除重复的两个外观 所以想要的结果是not var myArr 1 2 5 7 8 9 but var myArr 2 7 8 基本上我知道如何删除重复项 但
  • 在 TypeScript 中迭代对象的键和值

    在纯 JavaScript 中 我们可以迭代对象属性和值 如下所示 const values Object keys obj map key gt obj key 在 TypeScript 中 此语法是错误的 因为 TS 编译器显示以下消息
  • 如何在点击时添加和删除活动类 - 角度方式

    我正在这样做 div class tiles div 控制器 scope select function item scope selected item scope isActive function item return scope
  • d3js v5 + Topojson v3 关于加入 csv 和 json 的优化

    为了制作地图 我需要将一些值从 csv 导入到 json直接在代码中 为了加载 json 和 csv 文件 我使用 Promise 对象的异步操作 并使用两个循环和一个公共键在 json 文件上添加新属性 for var i 0 i lt
  • 如何使 CSS 样式覆盖 JavaScript 应用的样式

    我动态创建一个 HTML 表 并应用一些样式 var tbl document createElement table tbl id CrewMemberTable document getElementById CrewMemberPan
  • React Native 中循环 Json 并显示

    How do I go about looping the result i retrieved from Json render function console log this state list contents
  • Elasticsearch 前缀匹配消失且未添加 (QueryString)

    结转自Elasticsearch QueryStrings 部分匹配 NOT 查询 https stackoverflow com questions 40100006 elasticsearch querystrings partiall
  • 在 Photoshop 中使用 javascript 修改文本项的内容

    我知道如何使用这样的代码在 Photoshop 中设置文本项的内容 var al doc activeLayer if al kind LayerKind TEXT get the textItem var ti al textItem c
  • JSON.stringify 对于大型对象来说非常慢

    我在 javascript 中有一个非常大的对象 大约 10MB 当我对其进行字符串化时 需要很长时间 因此我将其发送到后端并将其解析为一个对象 实际上是带有数组的嵌套对象 这也需要很长时间 但这不是我们在这个问题中的问题 问题 我怎样才能
  • 嵌套对象的 setState

    我有一个嵌套对象作为状态 并且在组件中有一个表单 我正在考虑每次用户在表单中输入某些内容时更新状态 并且为了避免为每个输入创建许多函数 我正在考虑使用 switch 创建单个函数 使用 switch 创建单一函数是个好主意吗 如何更新对象的
  • 只允许在输入字段中输入数字

    我想要打开电话号码字段这个网站 http myfrugaltech com dev savoo register 只接受数字或数字 我无权编辑 HTML 代码 那么可以使用 jQuery 通过定位字段 ID 来完成此操作吗 如果可以的话 该
  • 如何从 fetch API 返回 json 响应

    我有一个像这样的函数 check auth fetch Urls check auth credentials include method GET then response gt if response ok return respon

随机推荐

  • 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中的标记生成器的状态机标记生成器 它仅迭代整个模板字符串一次