灌篮高手游戏id-灌篮高手2K13

Vue 是一个流行的前端框架,它提供了一个简洁而灵活的方式来构建用户界面。Vue 3 是 Vue 的最新主要版本,它带来了许多改进和新特性,例如组合式 API、响应式系统、模板编译器等。在 2023 年 12 月 30 日,Vue 团队发布了 Vue 3.4 “灌篮高手” 版本,这是一个次要版本,但是包含了一些实质性的内部改进和 API 改进。本文将概述 Vue 3.4 中的一些亮点,以及如何升级到这个版本。

2 倍更快的解析器和改进的 SFC 构建性能

在 Vue 3.4 中,Vue 完全重写了模板解析器,使其速度提高了 2 倍。以前,Vue 使用递归调用解析器,依赖于许多正则表达式和前向搜索。新的解析器使用基于 htmlparser 2 中的标记器的状态机标记器,它只遍历一次整个模板字符串。这意味着对于所有大小的模板,解析器的速度始终是原来的两倍。

新的解析器不仅提高了 Vue 核心的性能,还有利于 Volar / vue-tsc 的性能,以及需要解析 Vue SFC 或模板的社区插件,例如 Vue Macros。

除了解析器的改进,Vue 3.4 还发现了一些进一步提高整体 SFC 编译性能的机会。基准测试显示,在编译 Vue SFC 的脚本和模板部分时,同时生成源代码映射时,性能提高了约 44%,因此 3.4 应该会为大多数使用 Vue SFC 的项目带来更快的构建速度。

更高效的响应系统

Vue 3.4 还对响应系统进行了大量的重构,目的是提高计算属性的重新计算效率。为了说明正在改进的内容,让我们看看以下场景代码:

灌篮高手游戏id-灌篮高手2K13-第1张

const count = ref(0)\nconst isEven = computed(() => count.value % 2 === 0)\nwatchEffect(() => console.log(isEven.value)) // logs true\ncount.value = 2 // logs true again

在 Vue 3.4 之前,每当 watchEffect 被更改时,即使计算结果保持不变,count.value 的回调也会被触发。在 3.4 之后的优化中,回调现在仅在计算结果实际发生变化时才会触发。

灌篮高手游戏id-灌篮高手2K13-第2张

除此之外,在 3.4 中:

多个计算的深度变化只会触发一次同步效果。数组 shift、unshift、splice 方法只触发一次同步效果。

这些改进应该在许多场景中减少不必要的组件重新渲染,同时保持完全的向后兼容性。

更稳定的 defineModel

defineModel 是一个新的 <script setup> 宏,旨在简化支持 v-model 的组件的实现。它以前在 3.3 中作为实验特性发布,并在 3.4 中逐渐稳定。它现在还为使用 v-model 修饰符提供了更好的支持。

v-bind 同名简写

你现在可以使用简写方式:

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

新的写法:

<img :id :src :alt>

这个特性以前经常被要求提供。以前我们担心它的使用会与布尔属性混淆,在重新审视这个特性之后,我们现在认为考虑到它的动态特性,v-bind 的行为更像 JavaScript 而不是原生属性是有意义的。

改善 Hydration 不匹配错误

Hydration 是指在服务器端渲染(SSR)的场景中,客户端接管服务器端生成的静态 HTML 的过程。如果客户端和服务器端生成的 HTML 不一致,就会出现 Hydration 不匹配错误,这可能会导致渲染错误或内存泄漏。

Vue 3.4 对 Hydration 不匹配错误消息进行了许多改进:

提高了措辞的清晰度(由服务器呈现而不是客户端预期)。消息现在包括了所涉及的 DOM 节点,因此你可以在页面或元素面板中快速找到它。Hydration 不匹配检查现在也适用于类、样式和其他动态绑定的属性。

此外 3.4 还添加了一个新的编译时标志 __VUE_PROD_HYDRATION_MISMATCH_DETAILS__,它可以用来强制 Hydration 不匹配错误,即使在生产环境中也要包含完整的细节。

错误代码和编译时标记

为了减少 bundle 的大小,Vue 在生产构建中删除了长错误消息字符串。这意味着在生产中被错误处理程序捕获的错误将收到很短的错误代码,如果不深入 Vue 的源代码,这些代码很难理解。为了改善这一点,我们在文档中增加了 [生产错误参考页面]。错误代码是从最新版本的 Vue 稳定版本中自动生成的。

我们还增加了一个 [编译时标记参考页面],其中包含如何在不同的构建工具配置这些标记的说明。

灌篮高手游戏id-灌篮高手2K13-第3张

已删除的弃用功能

Vue 3.4 还删除了一些在 3.3 中被标记为过时的功能,例如:

全局 JSX 配置:从 Vue 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 插件继续使用。