vue 2.0 以及3.0的双向绑定原理的实现

 1 在vue3.0发布之前  vue2.0利用 object.defineProperty来实现双向数据绑定原理，vue3.0是利用 proxy这个对象实现的(不了解的可以先去查查这个对象)。 这里应该不用介绍什么是双向吧。

2  先介绍 object.defineProperty

先看HTML代码 

 <input type="text" id="txt" onkeyup="show()">//会把这里输入的数据显示到h1标签里面 这里使用了键盘事件
    <h1 id="showtxt">
    </h1>

//按照1 2 3 4 的顺序看
 1 var obj={};//首先定义一个空的对象。
      Object.defineProperty(obj,"name",{//然后绑定一个name属性 
          
         4 set(val)//这个传过来的值就是 obj.name的值
          {
              shows(val)//执行方法
          }
          
      })
var tvale=document.getElementById('txt');
var hvalue=document.getElementById('showtxt');
     2 function show()
      {
         obj.name=txt.value;//这里是触发键盘事件 让这个对象的name属性的值等于文本框的值
      }
     3 function shows(val)
      {
          hvalue.innerText=val//这里进行赋值在set里面调用
      }//vue2.0实现数据的双向绑定原理

 

 3 再看 proxy的绑定 和上面差不多 直接贴代码了

//html结构不变
var tvale=document.getElementById('txt');
var hvalue=document.getElementById('showtxt');
         var obj={};
        let proxy=new Proxy(obj,{

          set(target,prop,value)//这里接受 3个参数 target表示传过来的对象 prop表示属性 value表示值
          {
              if(prop==='value')//判断是不是value属性 这个属性 只要和 show方法里面给的属性值一致即可
              {
                  target[prop]=value;//对属性赋值
                  shows(value)
              }
          }  
        })
        function show ()
        {
            proxy.value=tvale.value;
        }

        function shows(val)
        {
            hvalue.innerText=val;
        }