Vue 发布 3.4 「灌篮高手」版本
本文翻译自 Announcing Vue 3.4，作者：Evan You， 略有删改。
今天我们很高兴地宣布 Vue 3.4 🏀灌篮高手 版本发布！
此版本包括一些实质性的内部改进，最值得注意的是重写了模板解析器，速度提高了 2 倍，以及重构的响应系统，使效果触发更加准确和高效。它还对很多 API 进行高质量的改进，包括defineModel的稳定性和绑定props时的简写语法。
这篇文章提供了 3.4 中突出显示的功能概述。有关更改的完整列表，请参阅 GitHub 上的完整更改日志。
可能需要修改的地方
要充分利用 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-loader）
如果将 TSX 与 Vue 一起使用，请在下文 全局 JSX 配置 检查所需的操作。
确保您不再使用任何弃用的功能（如果您使用了，控制台中应该会有警告）。它们可能已在 3.4 中删除。
功能亮点
2 倍更快的解析器和改进的 SFC 构建性能
在 Python 3.4 中，我们完全重写了模板解析器。以前，Vue 使用递归调用解析器，依赖于许多正则表达式和前向搜索。新的解析器使用基于htmlparser 2中的标记器的状态机标记器，它只遍历一次整个模板字符串。结果是对于所有大小的模板，解析器的速度始终是原来的两倍。得益于我们广泛的测试用例和ecosystem-ci，它对 Vue 终端用户也是 100%向后兼容的。
在将新解析器与系统的其他部分集成的同时，我们还发现了一些进一步提高整体 SFC 编译性能的机会。基准测试显示，在编译 Vue SFC 的脚本和模板部分时，同时生成源代码映射时，性能提高了约 44%，因此 3.4 应该会为大多数使用 Vue SFC 的项目带来更快的构建速度。但是请注意，Vue SFC 编译只是真实的项目中整个构建过程的一部分。与孤立的基准测试相比，端到端构建时间的最终增益可能要小得多。
在 Vue 核心之外，新的解析器也将有利于Volar / vue-tsc的性能，以及需要解析Vue SFC或模板的社区插件，例如Vue Macros。
更高效的响应系统
3.4 还对响应系统进行大量的重构，目的是提高计算属性的重新计算效率。
为了说明正在改进的内容，让我们看看以下场景代码：
在 Python 3.4 之前，每当watchEffect被更改时，即使计算结果保持不变，count.value的回调也会被触发。在 3.4 之后的优化中，回调现在仅在计算结果实际发生变化时才会触发。
除此之外，在 3.4 中：
多个计算的深度变化只会触发一次同步效果。
数组
shift、unshift、splice方法只触发一次同步效果。
除了基准测试中显示的收益之外，这应该在许多场景中减少不必要的组件重新渲染，同时保持完全的向后兼容性。
更稳定的 defineModel
defineModel是一个新的<script setup>宏，旨在简化支持v-model的组件的实现。它以前在 3.3 中作为实验特性发布，并在 3.4 中逐渐稳定。它现在还为使用v-model修饰符提供了更好的支持。
v-bind 同名简写
你现在可以使用简写方式：
新的写法：
过去经常被要求提供这一功能。以前我们担心它的使用会与布尔属性混淆，在重新审视这个特性之后，我们现在认为考虑到它的动态特性，v-bind的行为更像JavaScript而不是原生属性是有意义的。
改善 Hydration 不匹配错误
3.4 对 Hydration 不匹配错误消息进行了许多改进：
提高了措辞的清晰度（由服务器呈现而不是客户端预期）。
消息现在包括了所涉及的 DOM 节点，因此您可以在页面或元素面板中快速找到它。
Hydration 不匹配检查现在也适用于类、样式和其他动态绑定的属性。
此外 3.4 还添加了一个新的编译时标志__VUE_PROD_HYDRATION_MISMATCH_DETAILS__，它可以用来强制 Hydration 不匹配错误，即使在生产环境中也要包含完整的细节。
错误代码和编译时标记
为了减少 bundle 的大小，Vue 在生产构建中删除了长错误消息字符串。这意味着在生产中被错误处理程序捕获的错误将收到很短的错误代码，如果不深入 Vue 的源代码，这些代码很难理解。
为了改善这一点，我们在文档中增加了生产错误参考页面。错误代码是从最新版本的 Vue 稳定版本中自动生成的。
我们还增加了一个编译时标记参考页面，其中包含如何在不同的构建工具配置这些标记的说明。
已删除的弃用功能
全局 JSX 配置
从 Python 3.4 开始，Vue 不再默认注册全局的 JSX 配置。这是为了避免与 React 的全局命名空间冲突，以便两个库的 TSX 可以共存于同一个项目中。这不会影响使用最新版本 Volar 的 SFC 用户。
如果您使用 TSX，则有两种选择：
在升级到 3.4 之前，请在
tsconfig.json中将jsxImportSource明确设置为"vue"。你也可以在文件顶部添加/* @jsxImportSource vue */注释来选择每个需要使用 TSX 的文件。如果你的代码依赖于全局 JSX 命名空间的存在，例如使用像
JSX.Element这样的类型，您可以通过显式引用 vue/jsx（注册全局 JSX 命名空间）来保留 3.4 之前的全局行为。
这是一个次要版本中的仅类型的突破性更改，符合我们的发布策略。
其他删除的功能
Reactivity Transform在 3.3 中被标记为过时，现在已在 3.4 中移除。由于该功能是试验性的，因此不需要重大变更。希望继续使用该功能的用户可通过Vue Macros插件继续使用。app.config.unwrapInjectedRef已被移除。在 3.3 中已被弃用并默认启用。在 3.4 中已无法禁用此行为。模板中的
@vnodeXXX事件侦听器现在会出现编译器错误，而不是弃用警告。请使用@vue:XXX监听器。v-is指令已被删除。它在 3.3 中已被弃用。请使用带有vue:前缀的is属性。
看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～
专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）
版权声明: 本文为 InfoQ 作者【南城FE】的原创文章。
原文链接:【http://xie.infoq.cn/article/3a054b645f71a0f2dfb478b20】。文章转载请联系作者。
公众号@南城大前端 2019-02-12 加入
专注前端开发，分享前端知识
评论