Vue2.0与Vue3.0双向绑定区别

Vue2.0与Vue3.0双向绑定区别

vue2中的双向绑定Object.defineProperty()是需要进行深度遍历然后循环创建Object.defineProperty()对每个属性名进行监听，监听get和set属性进行数据的双向绑定

那么在vue3中，利用proxy代理这个对象A,然后不去操作原对象A，在代理对象中进行所有属性的监听！从而达到双向绑定的效果

proxy优点：

因为原vue2中的Object.defineProperty()是需要进行深度遍历然后循环创建Object.defineProperty()对每个属性名进行监听，性能多少有点浪费！
而Proxy可以劫持原对象，然后创建一个代理对象，代理这个原对象进行属性监听。一共有13种劫持状态可供选择。性能要比之前的Object.defineProperty()高。

<script>
      const obj = {
        name: "k",
        sex: 1,
      };
      //   手写v3响应式proxy：优点：创建一个代理的对象进行属性的：增。读、删，等操作
      // 1、监听的原对象
      // 3、进行对这个对象的操作
      const ObjProxy = new Proxy(obj, {
 
        //set与get中传入值的详情说明
        //1.target：原对象
        //2.key：当前属性名
        //3.newValue：修改的新值
        //4.receiver：代理的这个对象
 
        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 = "y";
      //读取原对象看看是否修改成功
      console.log(obj);
    </script>