在前端领域，Vue.js 总是以其优雅和高效的编码方式，受到开发者的青睐。前几天，Vue.js 迎来了一个重要更新——Vue 3.4 版本。这次更新不仅带来了性能上的飞跃，还引入了多项新特性，进一步优化了开发体验。在本文中，我们介绍一下 Vue 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. 如果将 TSX 与 Vue 结合使用，请检查已删除：全局 JSX 命名空间中所需的操作。

3. 确保您不再使用任何已弃用的功能（如果是，控制台中应该会出现警告）。它们可能已在 3.4 中被删除。

二、性能提升

解析器速度提高 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 还对响应性系统进行了重大重构，目标是提高计算属性的重新计算效率。在旧版本中，即使计算属性的结果未发生变化，每次依赖项更新，观察者也会被触发。而在 Vue 3.4 中，优化后的系统确保只有在计算结果实际变化时，相关的效果才会被触发，从而减少了组件的不必要渲染，提升了整体的性能。

三、API改进与新特性

1、definedModal

在之前的版本中作为实验性功能引入的 defineModel，在 Vue 3.4 中正式成为稳定特性。这个 API 主要用于简化支持 v-model 的组件实现，并在最新版本中增加了对 v-model 修饰符的支持。例如，你可以使用 defineModel 来创建一个响应式的输入组件。

<!-- Parent.vue -->
<template>
  <h1>{{ msg }}</h1>
  <Child v-model="msg" />
</template>

<script lang="ts" setup>
import Child from '../components/Child.vue'
import { ref } from 'vue'

const msg = ref('Hello World!')
</script>

<!-- Child.vue -->
<template>
  <span>My input</span> 
  <input v-model="model">
</template>

<script lang="ts" setup>
const model = defineModel()
</script>

2、v-bind 同名简写

Vue 3.4 引入了 v-bind 的同名简写功能，使得开发者在模板中绑定属性时可以省略重复的变量名。当属性名和绑定的变量名相同时，可以直接使用属性名，从而使模板更加简洁。例如，对于一个需要绑定多个属性的组件，传统的写法和新的简写方法对比如下：

<!-- 传统方式 -->
<my-component :title="title" :content="content" :src="src"></my-component>

<!-- 使用 v-bind 同名简写 -->
<my-component :title :content :src></my-component>

3、改善水合不匹配错误

Vue 3.4 对水合不匹配错误消息进行了一些改进：

改进了措辞的清晰度（服务器渲染与客户端预期的区别）。

错误消息现在包括相关的DOM节点，这样可以快速在页面或元素面板中找到它。

水合不匹配检查现在还适用于class、style和其他动态绑定的属性。

此外，Vue 3.4 还新增了一个编译时标志__VUE_PROD_HYDRATION_MISMATCH_DETAILS__，可以用于在生产环境中强制水合不匹配错误包含完整的详细信息。

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

为了减少构建打包后包的大小，VUE减少了生产构建中的长错误消息字符串。但是，这意味着生产中错误处理程序捕获的错误将收到短的错误代码，而这些错误代码在不深入研究Vue 源代码的情况下很难解密。

为了改善这一点，我们已在文档中添加了生产错误参考页面。错误代码将自动从最新版本的VUE稳定版本生成。

我们还添加了一个编译时标志参考，其中包含有关如何为不同构建工具配置这些标志的说明。

四、删除了弃用的功能

1、全局JSX名称空间

从3.4开始，Vue默认情况下不再注册全局JSX名称空间。这是避免与React的全局名称空间碰撞的必要条件，以便两个LIB的TSX可以在同一项目中共存。这不应使用最新版本的Volar影响仅使用SFC的用户。

如果您使用的是TSX，则有两个选择：

在升级到3.4之前，将JSXimportSource明确将jsximportsource设置为’vue '。您还可以通过在文件顶部添加/* @jsximportsource Vue */评论来选择每个文件。

如果您的代码取决于全局JSX名称空间的存在，例如使用JSX.Element等类型的使用，您可以通过明确引用VUE/JSX来保留确切的3.4全局行为，该行为会记录全局JSX名称空间。

请注意，这是次要版本中仅类型的破坏变化，它遵守了我们的发布政策。

2、其他删除功能

反应性转换在3.3中被标记为弃用，现在在3.4中删除。由于功能是实验性的，因此这种变化不需要大更改。希望继续使用该功能的用户可以通过VUE MACROS插件进行操作。

app.config.unwrapinjectedref已删除。默认情况下，它在3.3中被弃用和启用。在3.4中，不再可能禁用此行为。

@vnodexxx事件模板中的侦听器现在是编译器错误，而不是发出不推荐使用的警告。使用@vue：xxx侦听器。

v-is指令已被删除。它在3.3中被弃用。需要改用带有 vue: 前缀的is属性。