vue.3.0 dom赋值_浅谈vue3.0和vue2.0的区别

7ae62ab63e2a47ad0eaca9fc88d4e94a.png

进入2020年,离vue3.0正式版发布的时间越来越近了。今天,借助尤雨溪大大提前发布的vue3.0源码,老K为大家整理一下vue3.0和vue2.0的区别。

vue3的变化可以总结为以下几点:

  • 更小
  • 更快
  • 加强typescript支持
  • Api一致性
  • 提高可维护能力
  • 开放更多底层功能

其中前三点是最主要的变化。

更小:

vue2采用面向对象编程的思想,vue3则采用函数式编程的思想。

vue2源码中代码是这样组织的:

function vue(){...} vue.prototype.init = ...

vue3源码中是这样组织的:

//监听方法:function watch(){...} //渲染方法:function render(){...}

原因:充分利用函数式编程组合大于继承的优势,采用函数式编程更利于逻辑功能的复用,webpack打包时更有利于tree-shaking,更利于代码的压缩,更利于返回值类型校验,压缩后的文件体积更小。

更快:

vue3修改了虚拟dom的算法(即diff算法 - 比对虚拟dom有没有变化)

vue2需要diff所有的虚拟dom节点,而vue3参考了SVELTE框架的思想,先分层次-然后找不变化的层-针对变化的层进行diff,更新速度不会再受template大小的影响,而是仅由可变的内容决定。经过尤雨溪自己的测试,大概有6倍的速度提升。

加强typescript支持:

vue3的源码开始采用了ts进行编写,给开发者也提供了支持ts的开发模式。

Api一致性

vue3最开始的版本可以完美兼容vue2的api。

提高可维护能力

从源码的层面上提供了更多的可维护能力。

开放更多底层功能

把更多的底层功能开放出来,比如render、依赖收集功能,我们可以更好的进行自定义化开发,可以写更多的高阶组件。

最后我们再谈谈两者在数据双向绑定方面的区别。

数据双向绑定:

关于数据双向绑定的实现,vue2 采用了defineProperty,而vue3则采用了proxy。

优点:

  1. 使用proxy不污染源对象,会返回一个新对象,defineProperty是注入型的,会破坏源对象
  2. 使用proxy只需要监听整个源对象的属性,不需要循环使用Object.defineProperty监听对象的属性
  3. 使用proxy可以获取到对象属性的更多参数,使用defineProperty只能获取到监听属性的新值newvalue
/* vue2.0*/var a = { b:123, c:444};Object.defineProperty(a,'b',{     set: function(newvalue){       console.log('i am be set')     }}) //只能获取到newvalue这个参数/* vue3.0 */var a={ b:123, c:444};var newa = new Proxy(a,{     set:function(target,key,newvalue){         console.log(target,key,newvalue)     }}) //可以获取到target,key,newvalue三个参数

希望整理的这些内容对大家有所帮助。最后老K提前祝大家春节快乐!!!

4fbb9436e2825e8169825660e0d32841.gif

本文为原创内容,若转载请注明出处,转发感激不尽。

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页