Vue2 Vue3 区别

2,410 阅读2分钟
vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert() 对数据进行劫持 结合 发布订阅模式的方式来实现的
vue3 中使用了 es6 的 ProxyAPI 对数据代理
defineProperty只能监听某个属性,不能对全对象监听,可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可)可以监听数组,不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化
在 2.x 版本里,不管数据多大,都会在一开始就为其创建观察者。当数据很大时,这可能会在页面载入时造成明显的性能压力。3.x 版本,只会对「被用于渲染初始可见部分的数据」创建观察者,而且 3.x 的观察者更高效。
2.x 版本中,使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行;3.x 版本中,只有依赖那个属性的 watcher 才会重新运行
3.x 新加入了 TypeScript 以及 PWA 的支持

生命周期变化

  • beforeCreate -> 请使用 setup()
  • created -> 请使用 setup()
  • beforeMount -> onBeforeMoun
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured

vue和react最大的区别 一.双向数据绑定 & 单向数据流 二.Vue类Html VS JSX

虽然vue3在函数式编程方面,使其在一些API的使用、组件JS层的逻辑上更像react,但是其模板语法的根基是没有变的。个人理解,模板语法相较于JSX,可能没有那么灵活,可能也会增加一定的代码量,但其最大的好处是可读性极强,并且实现了组件的“逻辑层”和“视图层”的解耦。而react则是另一个极端,使用JSX将逻辑和视图完全耦合在了一起,虽然赋予了极高的灵活性,但也带来了一定的问题——如果编写组件的时候比较放飞自我,那么后期阅读组件以及维护的成本会直线上升

针对使用者主流框架的相近,提升了对于框架的内部理解,降级了使用 成本,如果有一天src 更加相近,可能会达到公用组件,跟随业务自由选择框架