Vue船新版本 3.4（灌篮高手）正式发布

2023 年 12 月 28 日，Vue3 全新版本 3.4（灌篮高手）正式发布。

这个版本包括一些实质性的内部改进-尤其是重写了模板解析器使其速度提高了 2 倍，以及重构了响应系统，使其效果触发的更加准确和高效。它还包含许多生活质量 API 改进，它还包含了一些提升用户体验的 API 改进，包括对 defineModel 的稳定支持以及在绑定 props 时使用同名简写。

使用 3.4 前注意事项

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. 如果在 Vue 中使用 TSX，请检查已移除的功能中的”Global JSX Namespace”，并采取相应的行动。

3. 请确保您不再使用任何已弃用的功能（如果有的话，您应该在控制台中收到相应的警告）。这些功能可能已在 3.4 版本中被移除。

功能亮点

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

在 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。

更高效的响应性系统

3.4 版本还包含了对响应性系统的重大重构，旨在提高计算属性的重新计算效率。

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

const count = ref(0);
const isEven = computed(() => count.value % 2 === 0);

watchEffect(() => console.log(isEven.value)); // true

count.value = 2; // 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 修饰符一起使用。

相关文档：

• Revised Component v-model section(https://vuejs.org/guide/components/v-model.html)
• defineModel API reference(https://vuejs.org/api/sfc-script-setup.html#definemodel)

v-bind 同名缩写

你可以将

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

缩写成

<img :id :src :alt>

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

改进的 Hydration 不匹配错误

3.4 版本带来了一系列改进，以改善 Hydration 不匹配错误消息

1. 改进了措辞的清晰度（由服务器呈现与客户端预期）
2. 现在的错误消息中包含了相关的 DOM 节点，这样你就可以快速在页面或元素面板中定位它。
3. Hydration 不匹配检查现在还适用于类、样式和其他动态绑定的属性。此外，3.4 版本还添加了一个新的编译时标志，VUE_PROD_HYDRATION_MISMATCH_DETAILS，可以用于在生产环境中强制 Hydration 不匹配错误包含完整的详细信息。

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

为了减小打包大小，在生产构建中，Vue 会省略长的错误消息字符串。然而，这意味着在生产环境中通过错误处理程序捕获的错误将收到难以解读的短错误代码，除非深入研究 Vue 的源代码。

为了改进这一点，我们在文档中添加了一个生产环境错误参考页面(https://vuejs.org/error-reference/)。错误代码是从最新版本的 Vue 稳定发布版自动生成的。

我们还添加了一个编译时标志参考(https://vuejs.org/api/compile-time-flags.html)，其中包含了如何为不同的构建工具配置这些标志的说明。

移除了已弃用的功能

1. Global JSX Namespace

从 3.4 版本开始，默认情况下 Vue 不再注册全局的 JSX 命名空间。这是为了避免与 React 发生全局命名空间冲突，以便两个库的 TSX 可以在同一个项目中共存。这不会影响只使用单文件组件（SFC）的用户，只要使用最新版本的 Volar。

如果你正在使用 TSX，有两个选项：

• 在升级到 3.4 版本之前，在 tsconfig.json 中明确将 jsxImportSource 设置为’vue’。你也可以通过在文件顶部添加/_ @jsxImportSource vue _/注释来逐个文件选择加入。

• 如果你的代码依赖于全局 JSX 命名空间的存在，例如使用 JSX.Element 等类型，你可以通过显式引用 vue/jsx 来保留与 3.4 版本之前完全相同的全局行为，这将注册全局的 JSX 命名空间。

请注意，这是一个次要版本中的仅类型方面的破坏性变更，符合我们的更新策略。

2. 其它弃用功能

• 在 3.3 版本中，响应式转换（Reactivity Transform）被标记为已弃用，并在 3.4 版本中被移除。由于该功能是实验性的，这个变更不需要进行主要版本更新。希望继续使用该功能的用户可以通过 Vue Macros 插件来实现。

• app.config.unwrapInjectedRef 已被移除。它在 3.3 版本中被标记为已弃用，并且默认启用。在 3.4 版本中，不再可以禁用此行为。

• 在模板中使用的@vnodeXXX 事件监听器现在会导致编译错误，而不再是一个弃用警告。请改用@vue:XXX 监听器

• v-is 指令已被移除。它在 3.3 版本中被标记为已弃用。请改用带有 vue:前缀的 is 属性。

本文译自Announcing Vue 3.4(https://blog.vuejs.org/posts/vue-3-4)