vue2与vue3的双向绑定原理

vue2与vue3的双向绑定写法不同 vue使用Object.defineProperty来劫持对象属性 而vue3使用Proxy代理来实现双向绑定。

vue2:

   <div class="data"></div>
   <label>vue2:</label> <input type="text" class="dataInput" />
   var data={}
   Object.defineProperty(data,"value",{
   get(){
       return this._value //返回一个私有属性_value
   },
   set(value){
       document.querySelector(".data").innerText = value; //当data.value改变时候 将结果填入html中
   }
   })
    //监听输入 data.value改变为输入的值
   document.querySelector(".dataInput").oninput = (e) => {
        data.value = e.target.value;
   };

Object.defineProperty()这个方法是直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象,相当于劫持对象属性,在里面可以定义settter与getter寄存器属性,使用get与set进行操作,这样我们就实现了vue2的双向绑定

vue3的双向绑定原理与vue2的差不多 不过使用Proxy代理来写的,他俩的区别是Object.defineProperty要一个一个属性定义set与get 但是Proxy可以定义一个对象所有属性的get与set

vue3:

  <div class="data2"></div>
  <label>vue3:</label> <input type="text" class="data2Input" />
 var data2 = {};
     data2 = new Proxy(data2, {
        get(target, key) {
          return target[key];
        },
        set(target, key, value) {
          document.querySelector(".data2").innerText = value;
        },
      });
      document.querySelector(".data2Input").oninput = (e) => {
        data2.name = e.target.value;
      };

vue2与vue3的双向绑定原理

这样我们就实现了vue2与vue3的双向绑定

上一篇:004 springboot中日志导错包引起的问题


下一篇:vue2 响应式细节