浅谈vue3.0和vue2.0的区别

进入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提前祝大家春节快乐！！！

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