vue2与vue3的双向绑定原理

本文主要是介绍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的双向绑定原理的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！