Vue2.0和3.0双向绑定原理区别

vue2.0和3.0双向绑定原理的实现

　　html代码：

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

　　　　1.object.defineProperty

//按照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实现数据的双向绑定原理

　　　　2.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;
        }