宣布 Vue 3.4

今天，我们很高兴地宣布发布 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-cli)

2. 如果使用 TSX 与 Vue，请查看 已删除：全局 JSX 命名空间 中的必要操作。

3. 确保不再使用任何弃用功能（如果使用，您应该在控制台中看到警告）。它们可能已 在 3.4 中删除。

功能亮点 ​

速度提升 2 倍的解析器和改进的 SFC 构建性能 ​

• 上下文：PR#9674

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

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

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

更高效的响应式系统 ​

上下文：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 之前，watchEffect 的回调将在每次更改 count.value 时触发，即使计算结果保持不变。在 3.4 之后的优化中，回调现在仅在计算结果实际更改时才触发。

此外，在 3.4 中

• 多个计算依赖项更改仅触发一次同步效果。
• 数组 shift、unshift、splice 方法仅触发一次同步效果。

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

defineModel 现已稳定 ​

上下文：RFC#503

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

相关文档

• 修订的组件 v-model 部分
• defineModel API 参考

v-bind 同名简写 ​

上下文：PR#9451

您现在可以缩短此代码

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

到此

<img :id :src :alt>

此功能过去经常被请求。最初，我们担心它的使用会与布尔属性混淆。但是，在重新审视该功能后，我们现在认为 v-bind 应该比原生属性更像 JavaScript，考虑到它的动态特性。

改进的 Hydration 错配错误 ​

上下文：PR#5953

3.4 发布了许多改进的 Hydration 错配错误消息

1. 改进了措辞的清晰度（由服务器渲染 vs. 在客户端预期）。
2. 该消息现在包含有问题的 DOM 节点，因此您可以快速在页面上或元素面板中找到它。
3. Hydration 错配检查现在也适用于类、样式和其他动态绑定的属性。

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

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

为了减少捆绑包大小，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 中已移除。由于该功能是实验性的，因此此更改不需要进行重大版本更新。希望继续使用该功能的用户可以通过 Vue Macros 插件 来使用它。
• app.config.unwrapInjectedRef 已被移除。它在 3.3 中已弃用，并默认启用。在 3.4 中，不再可能禁用此行为。
• 模板中的 @vnodeXXX 事件监听器现在是编译错误，而不是弃用警告。请改用 @vue:XXX 监听器。
• v-is 指令已被移除。它在 3.3 中已弃用。请改用 带有 vue: 前缀的 is 属性。