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

随机推荐

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