Vue 3.4 发布

本文为翻译

原文地址：Announcing Vue 3.4 | The Vue Point — Vue 3.4 发布公告 |Vue 点 (vuejs.org)

今天，我们很高兴地宣布 Vue 3.4 “灌篮高手”的发布！

此版本包括一些实质性的内部改进 - 最引人注目的是重写的模板解析器，速度提高了 2 倍，以及重构的反应系统，使效果触发更加准确和高效。它还包含许多生活质量 API 改进，包括绑定 prop 时的 defineModel 稳定性和新的同名速记。

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

可能需要采取的行动

1. 为了充分利用 3.4 中的新功能，建议在升级到 3.4 时还更新以下依赖项：
   • Volar / vue-tsc@^1.8.27 (required)
   • @vitejs/plugin-vue@^5.0.0 (如果使用 Vite)
   • nuxt@^3.9.0 (如果使用 Nuxt)
   • vue-loader@^17.4.0 (如果使用 webpack or vue-cli)
2. 如果将 TSX 与 Vue 一起使用，请在 Removed: Global JSX Namespace 中检查所需的操作。
3. 确保您不再使用任何已弃用的特性(如果使用了，控制台中应该有警告告诉您)。它们可能在3.4中被删除了。

亮点功能

解析速度提高 2 倍，SFC 构建性能提高

• Context: PR#9674

在 3.4 中，我们完全重写了模板解析器。以前，Vue 使用递归下降解析器，它依赖于许多正则表达式和前瞻搜索。新的解析器使用基于 htmlparser2 中的分词器的状态机分词器，该分词器仅循环访问整个模板字符串一次。其结果是，对于各种大小的模板，解析器的速度始终是原来的两倍。由于我们广泛的测试用例和 ecosystem-ci，它也 100% 向后兼容 Vue 最终用户。

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

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

更高效的反应系统

Context: PR#5912

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 中：

• 多个计算的 dep 更改仅触发一次同步效果。
• 数组的 shift， unshift， splice 方法仅触发一次同步效果。

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

defineModel 现在稳定了

Context: RFC#503

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

相关文件：

• Revised Component v-model section
• defineModel API reference

v-bind 同名速记

Context: PR#9451

您现在可以缩短此时间：

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

对比：

<img :id :src :alt>

过去经常请求此功能。最初，我们担心它的用法与布尔属性混淆。然而，在重新审视了这个特性之后，我们现在认为，考虑到它的动态特性，它的行为更像 JavaScript 而不是原生属性是有意义的 v-bind 。

改进了水合不匹配错误

Context: PR#5953

3.4 版本对水和（Hydration）不匹配错误消息进行了多项改进：

1. 改进了措辞 (由服务器呈现与客户端预期呈现)。
2. 该消息现在包含有问题的 DOM 节点，因此您可以在页面或元素面板中快速找到它。
3. 冻结不匹配检查现在也适用于类、样式和其他动态绑定属性。

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

错误代码和编译时标志参考

为了减小 bundle 大小，Vue 在生产构建中丢弃了长错误消息字符串。然而，这意味着在生产环境中被错误处理程序捕获的错误将收到简短的错误代码，如果不深入研究 Vue 的源代码，这些错误代码很难破译。

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

我们还添加了编译时标志参考，其中包含有关如何为不同的生成工具配置这些标志的说明。

删除了已弃用的功能

全局 JSX 命名空间

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

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

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

请注意，这是次要版本中的纯类型中断性变更，它遵循我们的发布策略。

其他已删除的功能

• 反应性转换在 3.3 版本中被标记为已弃用，现在在 3.4 版本中删除。由于该功能是实验性的，因此此更改不需要 在major 版本。希望继续使用该功能的用户可以通过 Vue Macros 插件进行。
• app.config.unwrapInjectedRef 已被删除。它在 3.3 中已弃用并默认启用。在 3.4 中，无法再禁用此行为。
• @vnodeXXX 模板中的事件侦听器现在是编译器错误，而不是弃用警告。请改用 @vue:XXX 侦听器。
• v-is 指令已被删除。它在 3.3 中已弃用。请改用带 vue: 前缀的 is 属性。