今天,我们非常高兴地宣布 Vue 3.4"🏀大灌篮 "正式发布!
该版本包含一些实质性的内部改进-其中最显著的是重写了模板解析器,速度提高了 2 倍,还重构了反应性系统,使效果触发更准确、更高效。此外,它还对 API 进行了一系列质量改进,包括稳定了 defineModel
和绑定道具时的新同名简称。
本文章概述了 3.4 中的重点功能。有关变更的完整列表,请查阅GitHub 上的完整更新日志 [1]。
在 3.4 中,我们完全重写了模板解析器。以前,Vue 使用的是递归下降解析器,依赖于许多正则表达式和前瞻搜索。新的解析器使用了基于 htmlparser2[5] 中标记符的状态机标记符,只对整个模板字符串迭代一次。因此,对于各种大小的模板,解析器的速度都能持续提高一倍。得益于我们广泛的测试用例和 ecosystem-ci [6] 的支持,该解析器对 Vue 最终用户来说也是 100% 向后兼容的。
在将新解析器与系统其他部分集成时,我们还发现了一些进一步提高 SFC 整体编译性能的机会。基准测试表明,在生成源映射的同时编译 Vue SFC 的脚本和模板部分时,性能提高了约 44%。不过,请注意,Vue SFC 编译只是实际项目中整个构建过程的一部分。与孤立的基准相比,端到端构建时间的最终增益可能要小得多。
除 Vue 核心外,新解析器还将有利于提高 Volar / vue-tsc 以及需要解析 Vue SFC 或模板(如 Vue 宏)的社区插件的性能。
上下文:PR#5912 [7]
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 版之后的优化,现在只有当计算结果发生变化时才会触发回调。
此外,在 3.4 中
shift
、unshift
和 splice
方法只触发一次同步效果。除了基准 [8] 中显示的增益外,这应能在许多情况下减少不必要的组件重新呈现,同时保留完全的向后兼容性。
defineModel
现已稳定上下文:RFC#503 [9]
defineModel
是一个新的 <script setup>
宏,旨在简化支持 v-model
的组件的实现。它曾作为实验功能在 3.3 中发布,并在 3.4 中升级到稳定状态。现在,它还为使用 v-model
修饰符提供了更好的支持。
相关文档:
v-bind
同名速记语境:PR#9451 [12]
现在您可以将其缩短:
<img :id="id" :src="src" :alt="alt" />
变成这样:
<img :id :src :alt />
该功能在过去经常被要求使用。最初,我们担心其用法会与布尔属性相混淆。不过,在重新审视该功能后,我们现在认为,考虑到其动态性质,v-bind
的行为比原生属性更像 JavaScript,这是有道理的。
语境:PR#5953 [13]
3.4 版对水合失配错误信息进行了多项改进:
此外,3.4 还添加了一个新的编译时标志 VUE_PROD_HYDRATION_MISMATCH_DETAILS[14],可用于强制水合失配错误包含完整的详细信息,即使在生产环境中也是如此。
为了减少包的大小,Vue 会在生产构建中丢弃较长的错误信息字符串。不过,这意味着生产环境中错误处理程序捕获的错误会收到较短的错误代码,如果不深入研究 Vue 的源代码,就很难解读这些代码。
为了改善这种情况,我们在文档中添加了生产错误参考页 [15]。这些错误代码是从 Vue 稳定发布的最新版本中自动生成的。
我们还添加了编译时标志参考 [16],其中说明了如何为不同的构建工具配置这些标志。
从 3.4 开始,Vue 默认不再注册全局 JSX
命名空间。这是为了避免与 React 的全局命名空间发生冲突,以便两个库的 TSX 可以在同一项目中共存。这不会影响使用最新版 Volar 的纯 SFC 用户。
如果您正在使用 TSX,有两种选择:
tsconfig.json
中将 jsxImportSource [17] 明确设置为 'vue'
。您也可以在文件顶部添加 /* @jsxImportSource vue */
注释,选择在每个文件中使用。JSX
命名空间的存在,例如使用 JSX.Element
等类型,您可以通过显式引用 vue/jsx
来保留与 3.4 之前完全相同的全局行为,该引用会注册全局 JSX
命名空间。请注意,这是次要发布版本中仅类型的破坏性变更,符合我们的 release policy [18]。
Reactivity Transform [19]在 3.3 中被标记为弃用,现已在 3.4 中移除。由于该功能是试验性的,因此不需要重大变更。希望继续使用该功能的用户可以通过 Vue Macros 插件 [20]。
删除了 app.config.unwrapInjectedRef
。该功能在 3.3 中已被弃用并默认启用。在 3.4 中已无法禁用此行为。
模板中的 @vnodeXXX
事件侦听器现在会出现编译器错误,而不是弃用警告。请使用 @vue:XXX
监听器。
删除了 v-is
指令。它在 3.3 中已被弃用。请使用带有 vue:
前缀的 is 属性 [21] 代替。
is
属性 : https://vuejs.org/api/built-in-special-attributes.html#i点个在看支持我吧