Vue 3.4 版本介绍 （vue官网翻译）

         

今天我们很高兴地宣布 Vue 3.4“🏀 Slam Dunk”发布！

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

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

---

• 需要采取的潜在行动
• 功能亮点
  • 解析器速度提高 2 倍并提高 SFC 构建性能
  • 更高效的反应系统
  • DefineModel 现已稳定
  • v-bind 同名简写
  • 改善水合作用不匹配错误
  • 错误代码和编译时标志参考
• 删除了已弃用的功能
  • 全局 JSX 命名空间
  • 其他删除的功能

需要采取的潜在行动

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中的标记生成器的状态机标记生成器，它仅迭代整个模板字符串一次。结果是解析器对于所有大小的模板来说始终是两倍的速度。得益于我们广泛的测试用例和生态系统-ci，它也 100% 向后兼容 Vue 最终用户。

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

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

更高效的反应系统​

上下文：PR#5912

3.4 还对反应性系统进行了重大重构，目标是提高计算属性的重新计算效率。

为了说明正在改进的内容，让我们考虑以下场景：

js

<span style="color:#374151"><span style="color:var(--tw-prose-pre-code)"><span style="background-color:var(--tw-prose-pre-bg)"><code><span style="color:var(--shiki-dark, inherit)"><span style="color:var(--shiki-dark, inherit)">const</span><span style="color:var(--shiki-dark, inherit)"> count</span><span style="color:var(--shiki-dark, inherit)"> =</span><span style="color:var(--shiki-dark, inherit)"> ref</span><span style="color:var(--shiki-dark, inherit)">(</span><span style="color:var(--shiki-dark, inherit)">0</span><span style="color:var(--shiki-dark, inherit)">)</span></span>
<span style="color:var(--shiki-dark, inherit)"><span style="color:var(--shiki-dark, inherit)">const</span><span style="color:var(--shiki-dark, inherit)"> isEven</span><span style="color:var(--shiki-dark, inherit)"> =</span><span style="color:var(--shiki-dark, inherit)"> computed</span><span style="color:var(--shiki-dark, inherit)">(() </span><span style="color:var(--shiki-dark, inherit)">=></span><span style="color:var(--shiki-dark, inherit)"> count.value </span><span style="color:var(--shiki-dark, inherit)">%</span><span style="color:var(--shiki-dark, inherit)"> 2</span><span style="color:var(--shiki-dark, inherit)"> ===</span><span style="color:var(--shiki-dark, inherit)"> 0</span><span style="color:var(--shiki-dark, inherit)">)</span></span>

<span style="color:var(--shiki-dark, inherit)"><span style="color:var(--shiki-dark, inherit)">watchEffect</span><span style="color:var(--shiki-dark, inherit)">(() </span><span style="color:var(--shiki-dark, inherit)">=></span><span style="color:var(--shiki-dark, inherit)"> console.</span><span style="color:var(--shiki-dark, inherit)">log</span><span style="color:var(--shiki-dark, inherit)">(isEven.value)) </span><span style="color:var(--shiki-dark, inherit)">// logs true</span></span>

<span style="color:var(--shiki-dark, inherit)"><span style="color:var(--shiki-dark, inherit)">count.value </span><span style="color:var(--shiki-dark, inherit)">=</span><span style="color:var(--shiki-dark, inherit)"> 2</span><span style="color:var(--shiki-dark, inherit)"> // logs true again</span></span></code></span></span></span>

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

另外，在3.4中：

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

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

defineModel现在稳定​

上下文：RFC#503

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

相关文档：

• 修订后的组件 v 模型部分
• 定义模型 API 参考

v-bind同名简写​

上下文：PR#9451

您现在可以缩短它：

模板

<span style="color:#374151"><span style="color:var(--tw-prose-pre-code)"><span style="background-color:var(--tw-prose-pre-bg)"><code><span style="color:var(--shiki-dark, inherit)"><span style="color:var(--shiki-dark, inherit)"><</span><span style="color:var(--shiki-dark, inherit)">img</span><span style="color:var(--shiki-dark, inherit)"> :</span><span style="color:var(--shiki-dark, inherit)">id</span><span style="color:var(--shiki-dark, inherit)">=</span><span style="color:var(--shiki-dark, inherit)">"</span><span style="color:var(--shiki-dark, inherit)">id</span><span style="color:var(--shiki-dark, inherit)">"</span><span style="color:var(--shiki-dark, inherit)"> :</span><span style="color:var(--shiki-dark, inherit)">src</span><span style="color:var(--shiki-dark, inherit)">=</span><span style="color:var(--shiki-dark, inherit)">"</span><span style="color:var(--shiki-dark, inherit)">src</span><span style="color:var(--shiki-dark, inherit)">"</span><span style="color:var(--shiki-dark, inherit)"> :</span><span style="color:var(--shiki-dark, inherit)">alt</span><span style="color:var(--shiki-dark, inherit)">=</span><span style="color:var(--shiki-dark, inherit)">"</span><span style="color:var(--shiki-dark, inherit)">alt</span><span style="color:var(--shiki-dark, inherit)">"</span><span style="color:var(--shiki-dark, inherit)">></span></span></code></span></span></span>

对此：

模板

<span style="color:#374151"><span style="color:var(--tw-prose-pre-code)"><span style="background-color:var(--tw-prose-pre-bg)"><code><span style="color:var(--shiki-dark, inherit)"><span style="color:var(--shiki-dark, inherit)"><</span><span style="color:var(--shiki-dark, inherit)">img</span><span style="color:var(--shiki-dark, inherit)"> :</span><span style="color:var(--shiki-dark, inherit)">id</span><span style="color:var(--shiki-dark, inherit)"> :</span><span style="color:var(--shiki-dark, inherit)">src</span><span style="color:var(--shiki-dark, inherit)"> :</span><span style="color:var(--shiki-dark, inherit)">alt</span><span style="color:var(--shiki-dark, inherit)">></span></span></code></span></span></span>

过去经常需要此功能。最初，我们担心它的用法会与布尔属性混淆。然而，在重新审视该功能之后，考虑到其动态特性，我们现在认为v-bind表现得更像 JavaScript 而不是本机属性是有意义的。

改善水合作用不匹配错误​

上下文：PR#5953

3.4 对水合不匹配错误消息进行了多项改进：

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

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

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

为了减少包的大小，Vue 在生产版本中删除了长错误消息字符串。然而，这意味着生产中的错误处理程序捕获的错误将收到简短的错误代码，如果不深入 Vue 的源代码，这些代码很难破译。

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

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

删除了已弃用的功能

全局 JSX 命名空间​

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

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

1. 在升级到 3.4 之前，将jsxImportSource显式设置为'vue'in tsconfig.json。/* @jsxImportSource vue */您还可以通过在文件顶部添加注释来选择加入每个文件。

2. 如果您的代码依赖于全局JSX命名空间的存在，例如使用等类型，则可以通过显式引用（注册全局命名空间）JSX.Element来保留 3.4 之前的确切全局行为。vue/jsxJSX

请注意，这是次要版本中仅类型的重大更改，符合我们的发布政策。

其他删除的功能​

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