Vue2 与 Vue3区别(一)

vue2 vue3 双向数据的区别

一.先来聊聊vue2双向绑定
原理:是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图,实现数据和视图同步

// 语法:
     Object.defineProperty(obj, "name", { get:()=> {}, set:()=> {})

参数一： obj:劫持对象，参数二："name":劫持对象属性 , 参数三：给属性添加set,get方法

二. 再聊一聊vue3双向绑定
原理:是通过Object.define.proxy 对对象进行代理，从而实现数据劫持。使用Proxy 的好处是它可以完美的监听到任何方式的数据改变，唯一的缺点是兼容性的问题，因为 Proxy 是 ES6 的语法

// 语法:
     let p =new Proxy(obj,{get:(target,prop,p)=>{},set:(target, prop, vaule, p)=>{}})

总结:

• vue2通过Object.defineProperty劫持的是对象中每一个属性
• vue3通过Proxy劫持的是对象中每一个属性

视图更新问题

• 因为 Vue 实例中的数据是响应式的,⽽我们新增的属性并不是响应式的，由于受现在 JavaScript 的限制，Vue ⽆法检测到属性的新增或删除。所以有时⽆法实时的更新到视图上!
• vue2和vue3的执行机制有所不同，v2是通过object.defindProperty,监听对象新增或修改某一个属性的时候会触发，所以会出现数据更新视图不更新的情况，而v3则是通过es6的proxy监听整个对象的变化,所以不会存在数据变了试图不变的情况

遇到这类问题的时候⼀般是通过 this.$set,该⽅法⼀共有三个参数,分别是给谁添加,新增属性,新增的值.
下面代码实现:

data:{
    obj:{
        a:1, 
        b:2
    }
}
methods:{
  add(){
     this.obj.c = 10;// 给obj添加属性及属性值
     console.log(this.obj);// 打印下来发现后台有c这条数据, 但是视图却没有更新
     this.$set(this.obj,"c",10);//这时候就通过这个方法强制更新
  }
}