Vue3.4更新 “Slam Dunk“发布!!!

news2024/12/26 21:33:34

Announcing Vue 3.4 | The Vue Point. vue3.4更新官方文档

在vue2即将结束更新的时候，vue3迎来了一个重要的更新。代号为“🏀 Slam Dunk”，即"灌篮高手"。这个版本进行了很多显著的内部改进，最重要的是模版解析的底层逻辑，让模版编译的速度提高了2倍。它还包含许多API的改进，包括defineModel绑定数据时的稳定性和新的同名缩写等，在一定程度上提高了开发的效率和代码的规范性。

vue3.4的更新主要包含了以下几点。

开发者需要进行的必要措施

1.更新依赖

为了更好的使用vue3.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.确保弃用功能不再使用

功能亮点

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）的性能

2.更高效的反应系统

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

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

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

这可以减少许多场景中不必要的组件重新渲染，同时保留完全的向后兼容性。

`3.defineModel`现在稳定

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

相关文档Component v-model | Vue.js

4.v-bind同名缩写

使用v-bind的时候名称相同可以缩写

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

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



<img :id :src :alt>

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

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

为了改进这一点，Vue 团队在文档中新增了一个生产错误参考页面。这个页面根据最新版本的 Vue 稳定发布自动生成错误代码，方便开发者进行参考。

此外，还添加了一个编译时标志参考，其中包含了如何在不同的构建工具中配置这些标志的说明。这样开发者可以根据自己的需求进行配置，提高开发效率。

移除过时功能

1.全局 JSX 命名空间

自 3.4 版本起，Vue 不再默认注册全局 JSX 命名空间。此举旨在避免与 React 发生全局命名空间冲突，以使两个库的 TSX 在同一个项目中和谐共存。此变更对仅使用最新版 Volar 的 SFC 用户无影响。

如果正在使用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属性。