Vue 3.4 发布
今天,我们很高兴地宣布 Vue 3.4 “????灌篮高手”的发布!
此版本包括一些实质性的内部改进 - 最引人注目的是重写的模板解析器,速度提高了 2 倍,以及重构的反应系统,使效果触发更加准确和高效。它还包含许多生活质量 API 改进,包括绑定 prop 时的稳定性和新的同名速记。defineModel
这篇文章概述了 3.4 中的突出功能。有关更改的完整列表,请参阅 GitHub 上的完整更新日志。
-
需要采取的可能行动
-
功能亮点
- 解析速度提高 2 倍,SFC 构建性能提高
- 更高效的反应系统
- defineModel 现已稳定
- v-bind 同名简写
- 改进了水合不匹配错误
- 错误代码和编译时标志参考
-
删除了已弃用的功能
- 全局 JSX 命名空间
- 其他已删除的功能
需要采取的可能行动
-
为了充分利用 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)
-
如果将 TSX 与 Vue 一起使用,请在 Removed: Global JSX Namespace 中检查所需的操作。
-
确保您不再使用任何已弃用的功能(如果是,您应该会在控制台中看到警告,告诉您)。它们可能已在 3.4 中删除。
功能亮点
解析速度提高 2 倍,SFC 构建性能提高
- 上下文: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 宏。
功能亮点
解析速度提高 2 倍,SFC 构建性能提高
- 上下文: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 宏。
更高效的反应系统
上下文:PR#5912
3.4 还对响应式系统进行了实质性的重构,目的是提高计算属性的重新计算效率。
为了说明正在改进的内容,让我们考虑以下方案:
JS的
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 之前,即使计算结果保持不变,每次都会触发 will 的回调会发生变化。在 3.4 之后的优化中,回调现在仅在计算结果实际更改时触发。watchEffect``count.value
此外,在 3.4 中:
- 多个计算的 dep 更改仅触发一次同步效果。
- 数组 , , 方法仅触发一次同步效果。
shift``unshift``splice
除了基准测试中显示的收益外,这应该会减少许多场景中不必要的组件重新渲染,同时保持完全的向后兼容性。
defineModel
现在稳定了
上下文:RFC#503
defineModel
是一个新的宏,旨在简化支持 .它之前在 3.3 中作为实验性功能发布,并在 3.4 中升级为稳定状态。现在,它还为修饰符的使用提供了更好的支持。<script setup>``v-model``v-model
相关文件:
- 修订后的组件 v 模型部分
- defineModel API 参考
v-bind
同名速记
上下文:PR#9451
您现在可以缩短此时间:
模板
<img :id="id" :src="src" :alt="alt">
对此:
模板
<img :id :src :alt>
过去经常请求此功能。最初,我们担心它的用法与布尔属性混淆。然而,在重新审视了这个特性之后,我们现在认为,考虑到它的动态特性,它的行为更像 JavaScript 而不是原生属性是有意义的。v-bind
改进了水合不匹配错误
上下文:PR#5953
3.4 对 Hydration 不匹配错误消息进行了多项改进:
- 改进了措辞的清晰度(由服务器呈现与客户端预期呈现)。
- 该消息现在包含有问题的 DOM 节点,因此您可以在页面或元素面板中快速找到它。
- 冻结不匹配检查现在也适用于类、样式和其他动态绑定属性。
此外,3.4 还添加了一个新的编译时标志 __VUE_PROD_HYDRATION_MISMATCH_DETAILS__,该标志可用于强制冻结不匹配错误,即使在生产环境中也包含完整的细节。
错误代码和编译时标志参考
为了减小 bundle 大小,Vue 在生产构建中丢弃了长错误消息字符串。然而,这意味着在生产环境中被错误处理程序捕获的错误将收到简短的错误代码,如果不深入研究 Vue 的源代码,这些错误代码很难破译。
为了改进这一点,我们在文档中添加了一个生产错误参考页面。错误代码是从最新版本的 Vue 稳定版本自动生成的。
我们还添加了编译时标志参考,其中包含有关如何为不同的生成工具配置这些标志的说明。
删除了已弃用的功能
全局 JSX 命名空间
从 3.4 开始,Vue 默认不再注册全局命名空间。这是避免与 React 发生全局命名空间冲突所必需的,以便两个库的 TSX 可以共存于同一个项目中。这应该不会影响使用最新版本的 Volar 的仅限 SFC 的用户。JSX
如果您使用的是 TSX,则有两种选择:
- 在升级到 3.4 之前,将 jsxImportSource 显式设置为 in。您还可以通过在文件顶部添加注释来选择加入每个文件。
'vue'``tsconfig.json``/* @jsxImportSource vue */
- 如果您的代码依赖于全局命名空间的存在,例如使用 etc 等类型,则可以通过显式引用 来保留 3.4 之前的确切全局行为,这将注册全局命名空间。
JSX``JSX.Element``vue/jsx``JSX
请注意,这是次要版本中的纯类型中断性变更,它遵循我们的发布策略。
其他已删除的功能
- 反应性转换在 3.3 中被标记为已弃用,现在在 3.4 中删除。由于该功能是实验性的,因此此更改不需要专业。希望继续使用该功能的用户可以通过 Vue Macros 插件进行。
-
app.config.unwrapInjectedRef
已被删除。它在 3.3 中已弃用并默认启用。在 3.4 中,无法再禁用此行为。 -
@vnodeXXX
模板中的事件侦听器现在是编译器错误,而不是弃用警告。请改用侦听器。@vue:XXX
-
v-is
指令已被删除。它在 3.3 中已弃用。请改用带有 vue: 前缀的 is 属性。
推荐阅读
-
基于 Vue3 的 Axios 异步请求
-
VUE3 与 Uniapp III(属性绑定)
-
美国国防部发布 DevSecOps 持续授权实施指南(下) - IV.评估方法
-
美国国防部发布 DevSecOps 持续授权实施指南(上)
-
PDMan-2.1.1 发布:用心开源,免费国产数据库建模工具(春节前最后一个版本)
-
TensorFlow 2.9 正式发布:oneDNN 改进实现 CPU 性能优化,WSL2 开箱即用
-
Volar 接管模式--创建更多符合 vue3 的 ts 代码提示
-
vue3 中的 toRaw
-
[Vue3] openlayers 加载磁贴地图并手动标记坐标点
-
蚂蚁金服集团与浙江大学联合发布开源大型模型知识提取框架 OneKE