Vue 3.4 正式版发布,带来多项更新

更新日期: 2024-01-05阅读: 200标签: Vue3

12 月 28 日,vue 3.4 正式版发布,代号为“Slam Dunk”,即灌篮高手。据尤大接收,这个版本进行了许多重要的内部改进,其中最引人瞩目的是重写的模板解析器。新的解析器将速度提高了 2 倍,显著提升了整体性能。

此外,响应性系统也经过了重构,使得 effect 触发更为精确和高效。为了提升开发体验,还进行了一些 api 改进,包括 defineModel 的稳定以及绑定props时的新的同名简写。


依赖项更新

为了充分利用 Vue 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)

如果在 Vue 中使用TSX,需要检查在 “Removed: Global JSX Namespace” 中所需的操作。

同时,确保不再使用任何已弃用的功能(如果有使用,应该会在控制台中收到相应的警告),并且这些功能可能已在 3.4 版本中被移除。


功能亮点

解析器速度提高 2 倍,SFC 构建性能提升

在3.4版本中,Vue 团队完全重写了模板解析器。之前,Vue使用的是依赖大量正则表达式和前向搜索的递归下降解析器。新的解析器则基于htmlparser2中的标记器,采用状态机的方式,仅需对整个模板字符串进行一次遍历。这使得无论模板大小如何,解析器的速度均提升了一倍。经过广泛的测试和生态系统持续集成,新解析器对 Vue 最终用户来说是100%向后兼容的。

在整合新解析器与其他系统部分时,发现了一些进一步提高SFC编译性能的机会。基准测试显示,生成 source map 时,编译 Vue SFC 的脚本和模板部分的速度提高了约 44%。因此,使用 Vue SFC 的大多数项目在 3.4 版本中的构建速度应有所提升。但请注意,Vue SFC 编译只是实际项目中整个构建过程的一部分。与单独的基准测试相比,最终的端到端构建时间效益可能较小。

此外,新解析器不仅提升了 Vue 核心的性能,还对 Volar / vue-tsc 以及需要解析Vue SFC 或模板的社区插件(如Vue Macros)有性能提升作用。

更高效的响应式系统

Vue 3.4 还对响应式系统进行了重大重构,目标是提高计算属性的重新计算效率。为了说明正在改进的内容,考虑以下场景:

const count = ref(0)
const isEven = computed(() => count.value % 2 === 0)

watchEffect(() => console.log(isEven.value)) // true

count.value = 2 // true

在 3.4 版本之前,watchEffect的回调函数会在每次count.value发生变化时触发,即使计算结果保持不变。但是通过 3.4 版本的优化,只有在计算结果实际发生变化时,回调函数才会触发,因此性能方面提升了不少。

此外,在3.4版本中:

  • 多个计算依赖的变化只会触发同步 effect 一次。
  • 数组的shift、unshift和splice方法只会触发同步 effect 一次。

除了在基准测试中显示的性能提升外,这些优化还可以在许多场景中减少不必要的组件重新渲染,同时保持完全向后兼容。

defineModel 已稳定

defineModel是一个新的``宏,旨在简化支持v-model的组件的实现。它在 3.3 版本中作为实验性功能发布,并在 3.4 版本中升级为稳定状态。现在,它还提供更好的支持与v-model修饰符一起使用。

相关文档参考如下:

v-bind 同名缩写

现在可以缩写它:

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

缩写之后:

<img :id :src :alt>

在过去,用户经常提出对这个功能的需求。起初,Vue 团队对于其使用方式和布尔属性的混淆存在一些疑虑。然而,在重新评估该功能后,他们现在认为让v-bind的行为更接近JavaScript,而不是直接对应原生属性,是有其合理性的,特别是考虑到它的动态特性。

改进水合不匹配错误

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

  • 改进了措辞的清晰度(服务器渲染与客户端预期的区别)。
  • 错误消息现在包括相关的dom节点,这样可以快速在页面或元素面板中找到它。
  • 水合不匹配检查现在还适用于class、style和其他动态绑定的属性。

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

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

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

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

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


移除过时功能

全局 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命名空间。

注意,此次变更仅影响类型,且为次要版本中的重大变更,符合发布政策。

其他已删除的功能

  • 在 3.3 版本中,Reactivity Transform 功能被标记为不推荐使用,并在 3.4 版本中被移除。由于该功能是实验性的,所以这个变化不需要进行重大更改。希望继续使用该功能的用户可以通过 Vue Macros 插件来实现。
  • app.config.unwrapInjectedRef已经被移除。在 3.3 版本中,它被标记为不推荐使用并默认启用。在 3.4 版本中,不再支持禁用此行为。
  • 在模板中使用@vnodeXXX事件监听器现在会导致编译错误,而不是发出不推荐使用的警告,需要改用@vue:XXX监听器。
  • v-is指令已被移除。在3.3版本中,它被标记为不推荐使用,需要改用带有vue:前缀的is属性。
原文连接:https://blog.vuejs.org/posts/vue-3-4


链接: https://www.fly63.com/article/detial/12632

vue3.x 新特性 - CompositionAPI

安装 vue-cli3,在使用任何 @vue/composition-api 提供的能力前,必须先通过 Vue.use() 进行安装,安装插件后,您就可以使用新的 Composition API 来开发组件了。

Vue3数据响应系统

Vue3 就是基于 Proxy 对其数据响应系统进行了重写,现在这部分可以作为独立的模块配合其他框架使用。数据响应可分为三个阶段: 初始化阶段 --> 依赖收集阶段 --> 数据响应阶段

快速进阶Vue3.0

在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。新版Vue 3.0计划并已实现的主要架构改进和新功能:

Vue 3 对 Web 应用性能的改进

有关即将发布的 Vue.js 的第 3 个主要版本的信息越来越多。通过下面的讨论,虽然还不能完全确定其所有内容,但是我们可以放心地认为,它将是对当前版本(已经非常出色)的巨大改进。 Vue 团队在改进框架 API 方面做得非常出色

Vue3 中令人兴奋的新功能

用新的 Vue 3 编写的程序效果会很好,但性能并不是最重要的部分。对开发人员而言,最重要的是新版本将会怎样影响我们编写代码的方式。如你所料,Vue 3 带来了许多令人兴奋的新功能。值得庆幸的是

200 行从零实现 vue3

emmm 用半天时间捋顺了 vue3 的源码,再用半天时间写了个 mini 版……我觉得我也是没谁了,vue3 的源码未来一定会烂大街的,我们越早的去复现它,就……emm可以越早的装逼hhh

从 Proxy 到 Vue 源码,深入理解 Vue 3.0 响应系统

10 月 5 日,尤雨溪在 GitHub 开放了 Vue 3.0 处于 pre-alpha 状态的源码,这次 Vue 3.0 Updates 版本的更新,将带来五项重大改进:速度体积、可维护性、面向原生、易用性

Vue 的数据响应式(Vue2 及 Vue3)

从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom。换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改。

在Vue2与Vue3中构建相同的组件

Vue 开发团队终于在今天发布了 3.0-beta.1 版本,也就是测试版。通常来说,从测试版到正式版,只会修复 bug,不会引入新功能,或者删改老功能。所以,如果你对新版本非常感兴趣,或者有新项目即将上马,不妨尝试一下新版本

Vue3中的Vue Router初探

对于大多数单页应用程序而言,管理路由是一项必不可少的功能。随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!