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）

2. 如果将TSX与Vue一起使用，请在下文 全局JSX配置 检查所需的操作。
3. 确保您不再使用任何弃用的功能（如果您使用了，控制台中应该会有警告）。它们可能已在3.4中删除。

功能亮点

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

在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

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

除此之外，在3.4中：

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

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

更稳定的 defineModel

defineModel是一个新的<script setup>宏，旨在简化支持v-model的组件的实现。它以前在3.3中作为实验特性发布，并在3.4中逐渐稳定。它现在还为使用v-model修饰符提供了更好的支持。

v-bind 同名简写

你现在可以使用简写方式：

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

新的写法：

<img :id :src :alt>

过去经常被要求提供这一功能。以前我们担心它的使用会与布尔属性混淆，在重新审视这个特性之后，我们现在认为考虑到它的动态特性，v-bind的行为更像JavaScript而不是原生属性是有意义的。

改善 Hydration 不匹配错误

3.4对Hydration不匹配错误消息进行了许多改进：

• 提高了措辞的清晰度（由服务器呈现而不是客户端预期）。
• 消息现在包括了所涉及的DOM节点，因此您可以在页面或元素面板中快速找到它。
• Hydration不匹配检查现在也适用于类、样式和其他动态绑定的属性。

此外3.4还添加了一个新的编译时标志__VUE_PROD_HYDRATION_MISMATCH_DETAILS__，它可以用来强制Hydration不匹配错误，即使在生产环境中也要包含完整的细节。

错误代码和编译时标记

为了减少bundle的大小，Vue在生产构建中删除了长错误消息字符串。这意味着在生产中被错误处理程序捕获的错误将收到很短的错误代码，如果不深入Vue的源代码，这些代码很难理解。

为了改善这一点，我们在文档中增加了生产错误参考页面。错误代码是从最新版本的Vue稳定版本中自动生成的。

我们还增加了一个编译时标记参考页面，其中包含如何在不同的构建工具配置这些标记的说明。

已删除的弃用功能

全局JSX配置

从3.4开始，Vue不再默认注册全局的JSX配置。这是为了避免与React的全局命名空间冲突，以便两个库的TSX可以共存于同一个项目中。这不会影响使用最新版本Volar的SFC用户。

如果您使用TSX，则有两种选择：

1. 在升级到 3.4 之前，请在 tsconfig.json 中将 jsxImportSource 明确设置为 "vue"。你也可以在文件顶部添加 /* @jsxImportSource vue */ 注释来选择每个需要使用TSX的文件。
2. 如果你的代码依赖于全局JSX命名空间的存在，例如使用像JSX.Element这样的类型，您可以通过显式引用vue/jsx（注册全局JSX命名空间）来保留3.4之前的全局行为。

这是一个次要版本中的仅类型的突破性更改，符合我们的发布策略。

其他删除的功能

• Reactivity Transform 在 3.3 中被标记为过时，现在已在 3.4 中移除。由于该功能是试验性的，因此不需要重大变更。希望继续使用该功能的用户可通过 Vue Macros 插件继续使用。
• app.config.unwrapInjectedRef 已被移除。在 3.3 中已被弃用并默认启用。在 3.4 中已无法禁用此行为。
• 模板中的 @vnodeXXX 事件侦听器现在会出现编译器错误，而不是弃用警告。请使用 @vue:XXX 监听器。
• v-is 指令已被删除。它在 3.3 中已被弃用。请使用带有 vue: 前缀的 is 属性。

---

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）