其他教程

其他教程

Products

当前位置:首页 > 其他教程 >

Vue 3.4 “灌篮高手” 发布

GG网络技术分享 2025-03-18 16:16 0


Vue 3.4 已正式发布,代号 \"? Slam Dunk\"(灌篮高手)。

新版本主要变化

  • 重写模板解析器,速度提升了 2 倍

  • 重构响应性系统 (Reactivity System),让 effect 的触发更准确高效

  • 优化 API,比如 defineModel 进入稳定阶段,以及绑定 props 时的同名简写

更新亮点

  • 解析器速度提升 2 倍,优化 SFC 构建性能

Vue 3.4 完全重写了模板解析器。在旧版本,Vue 使用递归下降解析器,该解析器依赖了大量正则表达式和前向搜索。

新的解析器使用基于 htmlparser2 的状态机 tokenizer(分词器),它仅迭代整个模板字符串一次。结果是对于所有尺寸的模板而言,解析器始终优化 2 倍。得益于 Vue 广泛的测试用例和 ecosystem-ci,它也 100% 向后兼容 Vue 终端用户。

在将新的解析器与系统的其他部分集成时,开发团队还发现了进一步优化整体 SFC 编译性能的机会。基准测试显示,在生成源码映射的同时,编译 Vue SFC 的脚本和模板部分的时候,性能优化了约 44%,因此 Vue 3.4 应该会优化大多数使用 Vue SFC 的项目构建。

但是请注意,Vue SFC 编译只是现实项目中整个构建过程的一部分。与单独的基准测试相比,端到端构建时间的最终收益可能要小得多。

在 Vue 核心库之外,新的解析器还将优化 Volar/vue-tsc,以及需要解析 Vue SFC 或模板的社区插件的性能,比如 Vue Macros。

  • 更高效的响应性系统 (Reactivity System)

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

在 3.4 之前的版本,每当count.value变更时,即使计算结果不变,也会触发watchEffect的回调。通过 3.4 优化,现在仅当计算结果实际发生变更时才会触发回调。

  • v-bind同名简写

下面用例:

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

可简写为:

<img:id:src:alt/>

Vue 团队表示,最初他们担心这种用法会与布尔属性混淆。但在重新审视该功能后,考虑到其动态特性,他们认为 v-bind 的行为比原生属性更像 JavaScript 是有意义的。

标签: 简写 模板

提交需求或反馈

Demand feedback