vue2.0和3.0的区别

1.重构响应式系统,使用Proxy替换Object.defineProperty,使用Proxy优势:

Proxy 对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。

•可直接监听数组类型的数据变化
•监听的目标为对象本身,不需要像Object.defineProperty一样遍历每个属性,有一定的性能提升
•可拦截apply、ownKeys、has等13种方法,而Object.defineProperty不行
•直接实现对象属性的新增/删除
优点:
使用proxy不污染源对象,会返回一个新对象,defineProperty是注入型的,会破坏源对象
使用proxy只需要监听整个源对象的属性,不需要循环使用Object.defineProperty监听对象的属性
使用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三个参数

2.重构 Virtual DOM,修改了diff算法

•模板编译时的优化,将一些静态节点编译成常量
•slot优化,将slot编译为lazy函数,将slot的渲染的决定权交给子组件
•模板中内联事件的提取并重用(原本每次渲染都重新生成内联函数)
4.代码结构调整,更便于Tree shaking(实际情况中,虽然依赖了某个模块,但其实只使用其中的某些功能。通过 tree-shaking,将没有使用的模块摇掉,这样来达到删除无用代码的目的。),使得体积更小
5.使用Typescript替换Flow
vue2需要diff所有的虚拟dom节点,而vue3参考了SVELTE框架的思想,先分层次-然后找不变化的层-针对变化的层进行diff,更新速度不会再受template大小的影响,而是仅由可变的内容决定。经过尤雨溪自己的测试,大概有6倍的速度提升。

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

4.加强typescript支持:

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

5.Api一致性

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

6.提高可维护能力

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

7.开放更多底层功能

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

8.新增Composition API,更好的逻辑复用和代码组织

Vue2.0中,随着功能的增加,组件变得越来越复杂,越来越难维护,而难以维护的根本原因是Vue的API设计迫使开发者使用watch,computed,methods选项组织代码,而不是实际的业务逻辑。
另外Vue2.0缺少一种较为简洁的低成本的机制来完成逻辑复用,虽然可以minxis完成逻辑复用,但是当mixin变多的时候,会使得难以找到对应的data、computed或者method来源于哪个mixin,使得类型推断难以进行。
所以Composition API的出现,主要是也是为了解决Option API带来的问题,第一个是代码组织问题,Compostion API可以让开发者根据业务逻辑组织自己的代码,让代码具备更好的可读性和可扩展性,也就是说当下一个开发者接触这一段不是他自己写的代码时,他可以更好的利用代码的组织反推出实际的业务逻辑,或者根据业务逻辑更好的理解代码。
第二个是实现代码的逻辑提取与复用,当然mixin也可以实现逻辑提取与复用,但是像前面所说的,多个mixin作用在同一个组件时,很难看出property是来源于哪个mixin,来源不清楚,另外,多个mixin的property存在变量命名冲突的风险。而Composition API刚好解决了这两个问题。

猜你喜欢

转载自blog.csdn.net/weixin_45284354/article/details/114015588