Vue 发布 3.4 「灌篮高手」版本

本文翻译自 Announcing Vue 3.4,作者:Evan You, 略有删改。

今天我们很高兴地宣布Vue 3.4 灌篮高手 版本发布!

此版本包括一些实质性的内部改进,最值得注意的是重写了模板解析器,速度提高了2倍,以及重构的响应系统,使效果触发更加准确和高效。它还对很多API进行高质量的改进,包括defineModel的稳定性和绑定props时的简写语法。

这篇文章提供了3.4中突出显示的功能概述。有关更改的完整列表,请参阅GitHub上的完整更改日志。

可能需要修改的地方

  1. 要充分利用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-loader)
  1. 如果将TSX与Vue一起使用,请在下文 全局JSX配置 检查所需的操作。

  2. 确保您不再使用任何弃用的功能(如果您使用了,控制台中应该会有警告)。它们可能已在3.4中删除。

功能亮点

2倍更快的解析器和改进的SFC构建性能

在Python 3.4中,我们完全重写了模板解析器。以前,Vue使用递归调用解析器,依赖于许多正则表达式和前向搜索。新的解析器使用基于htmlparser 2中的标记器的状态机标记器,它只遍历一次整个模板字符串。结果是对于所有大小的模板,解析器的速度始终是原来的两倍。得益于我们广泛的测试用例和ecosystem-ci,它对Vue终端用户也是100%向后兼容的。

在将新解析器与系统的其他部分集成的同时,我们还发现了一些进一步提高整体SFC编译性能的机会。基准测试显示,在编译Vue SFC的脚本和模板部分时,同时生成源代码映射时,性能提高了约44%,因此3.4应该会为大多数使用Vue SFC的项目带来更快的构建速度。但是请注意,Vue SFC编译只是真实的项目中整个构建过程的一部分。与孤立的基准测试相比,端到端构建时间的最终增益可能要小得多。

在Vue核心之外,新的解析器也将有利于Volar / vue-tsc的性能,以及需要解析Vue SFC或模板的社区插件,例如Vue Macros

更高效的响应系统

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

在Python 3.4之前,每当watchEffect被更改时,即使计算结果保持不变,count.value的回调也会被触发。在3.4之后的优化中,回调现在仅在计算结果实际发生变化时才会触发。

除此之外,在3.4中:

  • 多个计算的深度变化只会触发一次同步效果。
  • 数组shiftunshiftsplice方法只触发一次同步效果。

除了基准测试中显示的收益之外,这应该在许多场景中减少不必要的组件重新渲染,同时保持完全的向后兼容性。

更稳定的 defineModel

defineModel是一个新的

你可能感兴趣的:(南城前端专栏,前端框架Vue那些事,vue.js,前端,javascript)