Vue3.4正式发布,更快、更强、更好用

Vue 3.4 正式发布,更快、更强、更好用!

12 月 28 日,Vue 3.4 正式发布,代号为“🏀 Slam Dunk”,即灌篮高手。这个版本进行了许多重要的内部改进,其中最引人瞩目的是重写的模板解析器。新的解析器将速度提高了 2 倍,显著提升了整体性能。此外,响应性系统也经过了重构,使得 effect 触发更为精确和高效。为了提升开发体验,还进行了一些 API 改进,包括 defineModel 的稳定以及绑定props时的新的同名简写。

Vue 3.4 的更新包括:

  • 依赖项更新

  • 功能亮点

    • 解析器速度提高 2 倍,SFC 构建性能提升
    • 更高效的响应式系统
    • defineModel 已稳定
    • v-bind 同名缩写
    • 改进水合不匹配错误
    • 错误代码和编译时标志参考
  • 移除过时功能

    • 全局 JSX 命名空间
    • 其他已删除的功能

依赖项更新

为了充分利用 Vue 3.4 版本的新功能,建议在升级到 3.4 版本时同时更新以下依赖项:

  • Volar / vue-tsc@^1.8.27(必需)
  • @vitejs/plugin-vue@^5.0.0(如果使用 Vite)
  • nuxt@^3.9.0(如果使用Nuxt)
  • vue-loader@^17.4.0(如果使用webpack或vue-cli)

如果在 Vue 中使用TSX,需要检查在 “Removed: Global JSX Namespace” 中所需的操作。

清确保不再使用任何已弃用的功能(如果有使用,应该会在控制台中收到相应的警告)。这些功能可能已在 3.4 版本中被移除。

功能亮点

解析器速度提高 2 倍,SFC 构建性能提升

在3.4版本中,Vue 团队完全重写了模板解析器。之前,Vue使 用的是依赖大量正则表达式和前向搜索的递归下降解析器。新的解析器则基于htmlparser2中的标记器,采用状态机的方式,仅需对整个模板字符串进行一次遍历。这使得无论模板大小如何,解析器的速度均提升了一倍。经过广泛的测试和生态系统持续集成,新解析器对 Vue 最终用户来说是100%向后兼容的。

在整合新解析器与其他系统部分时,发现了一些进一步提高SFC编译性能的机会。基准测试显示,生成 source map 时,编译 Vue SFC 的脚本和模板部分的速度提高了约 44%。因此,使用 Vue SFC 的大多数项目在 3.4 版本中的构建速度应有所提升。但请注意,Vue SFC 编译只是实际项目中整个构建过程的一部分。与单独的基准测试相比,最终的端到端构建时间效益可能较小。

此外,新解析器不仅提升了 Vue 核心的性能,还对 Volar / vue-tsc 以及需要解析Vue SFC 或模板的社区插件(如Vue Macros)有性能提升作用。

更高效的响应式系统

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

为了说明正在改进的内容,考虑以下场景:

const count = ref(0)
const isEven = computed(() => count.value % 2 === 0)watchEffect(() => console.log(isEven.value)) // truecount.value = 2 // true

在 3.4 版本之前,watchEffect的回调函数会在每次count.value发生变化时触发,即使计算结果保持不变。但是通过 3.4 版本的优化,只有在计算结果实际发生变化时,回调函数才会触发。

此外,在3.4版本中:

  • 多个计算依赖的变化只会触发同步 effect 一次。
  • 数组的shiftunshiftsplice方法只会触发同步 effect 一次。

除了在基准测试中显示的性能提升外,这些优化还可以在许多场景中减少不必要的组件重新渲染,同时保持完全向后兼容。

defineModel 已稳定

defineModel是一个新的``宏,旨在简化支持v-model的组件的实现。它在 3.3 版本中作为实验性功能发布,并在 3.4 版本中升级为稳定状态。现在,它还提供更好的支持与v-model修饰符一起使用。

v-bind 同名缩写

现在可以缩写它:

<img :id="id" :src="src" :alt="alt">

缩写之后:

<img :id :src :alt>

在过去,用户经常提出对这个功能的需求。起初,Vue 团队对于其使用方式和布尔属性的混淆存在一些疑虑。然而,在重新评估该功能后,他们现在认为让v-bind的行为更接近JavaScript,而不是直接对应原生属性,是有其合理性的,特别是考虑到它的动态特性。

改进水合不匹配错误

Vue 3.4 对水合不匹配错误消息进行了一些改进:

  1. 改进了措辞的清晰度(服务器渲染与客户端预期的区别)。
  2. 错误消息现在包括相关的DOM节点,这样可以快速在页面或元素面板中找到它。
  3. 水合不匹配检查现在还适用于classstyle和其他动态绑定的属性。

此外,Vue 3.4 还新增了一个编译时标志__VUE_PROD_HYDRATION_MISMATCH_DETAILS__,可以用于在生产环境中强制水合不匹配错误包含完整的详细信息。

误代码和编译时标志参考

为了减小生产构建的打包大小,Vue 在生产环境中会删除长的错误消息字符串。然而,这也意味着在生产环境中通过错误处理程序捕获的错误将只收到难以解读的短错误代码,需要深入研究 Vue 的源代码才能理解其含义。

为了改进这一点,Vue 团队在文档中新增了一个生产错误参考页面。这个页面根据最新版本的 Vue 稳定发布自动生成错误代码,方便开发者进行参考。

此外,还添加了一个编译时标志参考,其中包含了如何在不同的构建工具中配置这些标志的说明。这样开发者可以根据自己的需求进行配置,提高开发效率。

移除过时功能

全局 JSX 命名空间

自 3.4 版本起,Vue 不再默认注册全局 JSX 命名空间。此举旨在避免与 React 发生全局命名空间冲突,以使两个库的 TSX 在同一个项目中和谐共存。此变更对仅使用最新版 Volar 的 SFC 用户无影响。

如果正在使用TSX,有两个解决方案可供选择:

  • 在升级至 3.4 之前,需要在tsconfig.json中明确设置jsxImportSource'vue'。此外,还可以在每个文件的顶部添加/* @jsxImportSource vue */的注释,以文件为单位选择性采用此选项。
  • 如果代码依赖于全局JSX命名空间的存在,例如使用JSX.Element等类型,可以通过显式引用vue/jsx来保持与 3.4 版本之前完全相同的全局行为,该行为会注册全局JSX命名空间。

注意,此次变更仅影响类型,且为次要版本中的重大变更,符合发布政策。

其他已删除的功能

  • 在 3.3 版本中,Reactivity Transform 功能被标记为不推荐使用,并在 3.4 版本中被移除。由于该功能是实验性的,所以这个变化不需要进行重大更改。希望继续使用该功能的用户可以通过 Vue Macros 插件来实现。
  • app.config.unwrapInjectedRef已经被移除。在 3.3 版本中,它被标记为不推荐使用并默认启用。在 3.4 版本中,不再支持禁用此行为。
  • 在模板中使用@vnodeXXX事件监听器现在会导致编译错误,而不是发出不推荐使用的警告,需要改用@vue:XXX监听器。
  • v-is指令已被移除。在3.3版本中,它被标记为不推荐使用,需要改用带有vue:前缀的is属性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/596650.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RK3399平台入门到精通系列讲解(实验篇)IO 多路复用实验之poll实验

🚀返回总目录 文章目录 一、IO 多路复用:poll介绍二、实验源码2.1、Makefile2.2、poll 实验驱动2.3、poll 驱动测试应用程序一、IO 多路复用:poll介绍 IO 多路复用是一种同步的 IO 模型。IO 多路复用可以实现一个进程监视多个文件描述符。 一旦某个文件描述符准备就绪,就通…

Vue2面试题:说一下虚拟DOM的原理?

虚拟dom是对真实dom的抽象&#xff0c;本质是JS对象 在生成真实DOM之前&#xff0c;vue会把模板编译为一个虚拟dom&#xff0c;当里面某个DOM节点发生变动时&#xff0c;通过diff算法对比新旧虚拟DOM&#xff0c;发现不一样的地方直接修改在真实的DOM上 优点&#xff1a; 可以…

osg - 光照

OSG全面支持 OpenGL 的光照特性&#xff0c;包括材质属性(material property)、光照属性(light property)和光照模型 (lighting model)。与 OpenGL 相似&#xff0c;OSG中的光源也是不可见的&#xff0c;而非渲染一个灯泡或其他自然形状。同样&#xff0c;光源会创建着色效果&a…

进程的程序替换(exec函数)【Linux】

进程的程序替换详解exec函数【Linux】 程序替换的原理exec系列函数函数理解命令理解&#xff08;助记&#xff09; 关于程序替换中环境变量的解释exec函数之间的关系exec函数的使用execlexeclpexecleexecv 程序替换的原理 进程的程序替换就是让子进程执行新程序&#xff0c; 执…

C 语言用户输入详解:scanf、fgets、内存地址解析及实用指南

C 语言中的用户输入 您已经学习了 printf() 函数用于在 C 语言中输出值。 要获取用户输入&#xff0c;可以使用 scanf() 函数&#xff1a; // 声明一个整数变量&#xff0c;用于存储我们从用户那里获得的数字 int myNum;// 提示用户输入一个数字 printf("请输入一个数字…

Java 8 新特性

Java 8 新特性 Java 8 (又称为 jdk 1.8) 是 Java 语言开发的一个主要版本。 Oracle 公司于 2014 年 3 月 18 日发布 Java 8 &#xff0c;它支持 函数式编程&#xff0c;新的 JavaScript 引擎&#xff0c;新的日期 API&#xff0c;新的Stream API 等。 1、新特性 Java8 新增…

QT_02 窗口属性、信号槽机制

QT - 窗口属性、信号槽机制 1. 设置窗口属性 窗口设置 1,标题 2,大小 3,固定大小 4,设置图标在 widget.cpp 文件中&#xff1a; //设置窗口大小,此时窗口是可以拉大拉小的 //1参:宽度 //2参:高度 this->resize(800, 600); //设置窗口标题 this->setWindowTitle("…

Docker中的核心概念

1.镜像 Image 一个镜像就代表一个软件。mysql镜像、redis镜像、mq镜像 2.容器 Container 一个镜像运行一次就会生成一个容器&#xff0c;容器就是一个运行的软件服务。 3.远程仓库 Repository 远程仓库用来存储所有软件的镜像&#xff0c;Docker Hub 4.本地仓库 用来存储…

Ubuntu18.04配置静态ip

文章目录 查看网卡名、ip地址、网关切换root用户&#xff0c;进入配置文件配置静态IP 查看网卡名、ip地址、网关 首先查看网卡名、ip地址、网关&#xff0c;找到对应的网卡名并记录其地址 ifconfigroute -n切换root用户&#xff0c;进入配置文件 sudo -icd /etc/netplanvim …

Linux系统中MYSQL重置密码(针对root忘记密码)

⼀ .进⼊MySql配置⽂件中 vi /etc/my.cnf 在最后⼀⾏添加免密码登陆: skip-grant-tables :wq 保存退出 ⼆.重启MySql service mysql restart 或 systemctl restart mysqld.service 三. 登陆数据库 mysql -uroot -p 让输⼊密码直接回⻋就可以 四.修改MySql密码 use mysql…

听GPT 讲Rust源代码--compiler(11)

File: rust/compiler/rustc_mir_transform/src/simplify.rs 在Rust源代码中&#xff0c;rust/compiler/rustc_mir_transform/src/simplify.rs文件是Rust编译器中一系列进行MIR&#xff08;中间表示&#xff09;简化的转换的实现。MIR是Rust编译器中用于进行优化和代码生成的中间…

开源大数据集群部署(一)集群实施规划

作者&#xff1a;櫰木 本次集群规划信息 本次实际生产业务体量存在巨大差异&#xff0c;但集群规划内容相同&#xff0c;因此建议实际生产环境按照按照一定比例扩展即可。 主机操作系统要求 软件信息参数配置8C16G操作系统版本CentOS Linux release 7.8.2003 (Core)java版本…

深入理解 BEM:前端开发中的命名约定革命

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

Python+OpenCV 零基础学习笔记(6):ROI

文章目录 相关链接运行环境前言ROI颜色区域分割颜色通道合并 相关链接 【2022B站最好的OpenCV课程推荐】OpenCV从入门到实战 全套课程 CSDN标题里个括号对应视频的分P OpenCVPython CSDN专栏 Gitee 项目地址 运行环境 Python:3.11.5Anaconda:23.7.4IDE:vscode运行环境&#x…

长虹智能电视41机芯(PM41i)强制刷机升级

适配型号&#xff1a; 3D51C4000i 3D60C4000i 3D60C4300i 升级方法&#xff1a; 第 1 步&#xff0c;将升级程序拷贝到U 盘根目录下&#xff0c;请保持根目录升级文件的唯一性文件名必须采用&#xff1a;chandroid_ota_PM41i_datapart.zip、upgrade_PM41i_EMMC_V1.00010_part…

WebSocket的优点和缺点:一文详解。

WebSocket 的优缺点 WebSocket 协议是一种双向通信协议&#xff0c;它使用单个 TCP 连接实现全双工通信&#xff0c;这使它比传统的 HTTP 协议更有效率。 WebSocket 优点 双向通信&#xff1a; WebSocket 协议支持双向通信&#xff0c;使服务器和客户端之间的通信更加方便和快…

Elasticsearch 中映射参数doc_values 和 fielddata分析比较

一、doc_values 默认情况下&#xff0c;大部分字段是索引的&#xff0c;这样让这些字段可被搜索。倒排索引&#xff08;inverted index&#xff09;允许查询请求在词项列表中查找搜索项&#xff08;search term&#xff09;&#xff0c;并立即获得包含该词项的文档列表。 倒排…

vscode 格式化代码后反而出现红色波浪线格式报错

表现&#xff1a; vscode 代码文件格式化之后&#xff0c;反而出现红色波浪线&#xff0c;提示 应该换行/缩进不正确 等等格式不规范之类的信息。 原因&#xff1a; 因为同时开启了两个格式化插件&#xff0c;且两者的规则有冲突。 就我自己的情况而言&#xff1a;格式化代…

漫谈广告机制设计 | 【预告】万剑归宗:机制设计提高平台广告收入的绝招

读者们好&#xff0c;新年快乐&#xff0c;祝大家新的一年工作顺利&#xff0c;万事如意。 假期更新了两篇文章oCPC实践录 | 以基木鱼为例谈线索类有效转化的设计与智能客服的问题和oCPC实践录 | 目标ROI的出价与转化回传调控算法&#xff0c;欢迎讨论、评论、点赞、分享、转发…

2023年为何YOLO成为最热门视觉检测技术?猫头虎带您揭秘其背后的原因!

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通Golang》…