vue2和vue3双向数据绑定原理

vue2原理

vue2的双向数据绑定是利用了es5 的一个API Object.definepropert() 对数据进行劫持 结合发布订阅模式来实现的。

Object.definedProperty方法可以在一个对象上直接定义一个新的属性、或修改一个对象已经存在的属性，最终返回这个对象。

参数：

参数一 obj：被定义或修改属性的对象；

参数二 prop：要定义或修改的属性名称；

参数三 descriptor：对属性的描述；

返回值：

函数将返回传递给他的obj对象本身。

示例：

//age_num、person是两个东西,靠Object.defineProperty来关联
        let age_num = '10';
        let person = {
            name:"小帅",
            sex:"男",
            age:18
        }
        Object.defineProperty(person,"age",{
        //当有人读取person的age属性的时，get函数（getter）就会调用,且返回的是age的值
           get:function(){
               console.log('读取age属性了');
               return age_num;
           },
 
        // 当有人读取person的age属性的时，set函数（setter）就会调用,且返回的是age的值
            set(value){
                //这里就是绑定
                age_num = value;
            }
        })
 
        for(let key in person){
            console.log('@',person[key]);
        }
        console.log(person);

打印结果

Object.defineProperty的缺点

• 深度监听需要一次性递归 (遍历每个对象的每个属性，如果对象嵌套很深的话，需要使用递归调用。)

• 无法监听新增属性/删除属性(Vue.set Vue.delete，未在 data 中定义的属性会报 undefined)

• 无法原生监听数组，需要特殊处理

vue3原理

Proxy可以理解成，在目标对象之前架设一层 "拦截"，当外界对该对象访问的时候，都必须经过这层拦截，而Proxy就充当了这种机制，类似于代理的含义，它可以对外界访问对象之前进行过滤和改写该对象。基本语法const obj = new Proxy(target, handler)，被代理之后返回的对象 = new Proxy(被代理对象，要代理对象的操作)

示例

      const obj = {
        name: "小帅",
        age: 18,
        address: "成都",
      };
      const ObjProxy = new Proxy(obj, {
        set: function (target, key, newValue, receiver) {
          // 第一种写法：监听到某个属性名新值就赋值给原对象的某个属性名
          // target[key] = newValue;
          // 第二种写法:也是vue3源码的写法，利用Reflect.set来实现监听新值
          Reflect.set(target, key, newValue);
          console.log(`监听：监听到${target[key]}的值已经被修改成了`, newValue);
        },
 
        get: function (target, key, receiver) {
          console.log(`监听：${key}属性被读取了`);
          // 第一种写法
          // return target[key];
          // 第二种写法
          return Reflect.get(target, key, receiver);
        },
      });
      //对这个代理对象进行值修改
      ObjProxy.name = "小美";
      //读取原对象看看是否修改成功
      console.log(obj);

打印结果

proxy 优缺点总结

• 规避了 Object.definedProperty的问题(可以监听数组，不用再去单独的对数组做特异性操作，vue3可以检测到数组内部数据的变化。)

• proxy 无法兼容所有浏览器