Vue3对比Vue2有哪些变化

发布时间:2021-06-23 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了Vue3对比Vue2有哪些变化前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

响应式

vue3 使用 Proxy 进行的响应式,Proxy 相比于 defineProperty 的优势,Object.defineProperty() 的问题主要有三个:

不能监听数组的变化

必须遍历对象的每个属性

必须深层遍历嵌套的对象

Proxy 在 ES2015 规范中被正式加入,它有以下几个特点:

针对对象:针对整个对象,而不是对象的某个属性,所以也就不需要对 keys 进行遍历。这解决了上述 Object.defineProperty() 第二个问题

支持数组:Proxy 不需要对数组的方法进行重载,省去了众多 hack,减少代码量等于减少了维护成本,而且标准的就是最好的。

除了上述两点之外,Proxy 还拥有以下优势: Proxy 的第二个参数可以有 13 种拦截方法,这比起 Object.defineProperty() 要更加丰富 Proxy 作为新标准受到浏览器厂商的重点关注和性能优化,相比之下 Object.defineProperty() 是一个已有的老方法。

管理方式

代码管理方式

Vue2 的核心代码在 src 目录下,使用 rollup 管理。

Vue3 使用 monorepo 管理 packages ,目录结构更清晰。

类型管理方式

Vue2 使用的 Flow,Facebook 维护的静态检查工具,已烂尾

Vue3 使用 TypeScript 重构了整个项目,拥抱 TS 生态

性能优化

源码体积优化

首先,移除一些冷门的 feature(比如 filter、inline-template 等);

其次,引入 tree-shaking 的技术,减少打包体积。 使用 tree-shaking 的原理就是利用 ES5 的模块语法的静态结构(即 import 和 export),通过编译阶段的静态分析,找到没有引入的模块,并打上标记,然后在打包的时候,不打包这些没用到的模块,从而减少项目体积。数据劫持优化Vue2 使用的 Object.defineProperty 的 getter/setter 对对象的属性进行的数据劫持,但是存在一些缺点,比如对于数组的检测支持并不是很好、不能检测对象属性的添加和删除(虽然有$set和$delete,但是还有不太友好)。 Vue3 使用 Proxy,它劫持的是整个对象,对于对象属性的增加和删除都能检测到

编译优化通过编译阶段对静态模板的分析,编译成 Block Tree,简单来说就是把每个节点都打上一个标记,然后 diff 的时候好判断是否需要更新这个节点,这是一个非常大的性能突破。

语法优化提供 composition API,他的优点包括

优化逻辑组织(对比 OptionsAPI),将某个逻辑关注点项目的代码都放在一个函数里,减少反复横挑

逻辑复用,Vue2 需要使用 mixin 来处理,Vue3 直接使用函数复用

总结

使用 proxy 代替 getter/setter

使用 typescipt 代替 flow 管理类型

引入 tree-shaking 减少代码体积

使用 composition 组织状态

使用 monorepo 代替 rollup 管理代码

来自:https://www.zhangningle.top/articles/Vue/Vue3对比Vue2有哪些变化.html

总结


以上是前端之家为你收集整理的Vue3对比Vue2有哪些变化全部内容,希望文章能够帮你解决Vue3对比Vue2有哪些变化所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。