s007-手写一个数据双向绑定

手写数据双向绑定，vue实现双向绑定的原理就是Object.defineProperty，重写其中的get，set方法
<input id="txt" />
   <p id="show-txt"></p>


   <script>
     var obj = {
       txt: ''
     };
     let newData = { ...obj }
     Object.defineProperty(obj, 'txt', {
       get: () => {
         console.log('读取')
         return obj.txt
       },
       set: (newValue) => {
         console.log('设置', newValue)
         newData.txt = newValue
         document.getElementById("txt").value = newValue;
         document.getElementById("show-txt").innerHTML = newValue;
       },
     })
     document.addEventListener("keyup", function (e) {
       obj.txt = e.target.value;
     })
     obj.txt = 'qdleader'
   </script>

const obj = {name:"zs"};
let newData = {...obj};
let proxy = new Proxy(obj,{
    //obj 为目标对象, attr 为对象的属性
    get(obj,attr){ //当我们获取代理对象的属性值是会走这个方法
        return obj[attr]
    },
    // obj为目标对象, attr为属性名, value为属性值
    set(target,attr,value){//当我们设置代理对象的属性值是会走这个方法
        if(attr === "name"){
            // obj[attr] = value
            newData.txt = value
            document.querySelector('#input1').value = value;
            document.querySelector('#box').innerHTML = value;
        }
        //表示成功
         return true
    }
})

proxy.name = 1231


document.addEventListener('keyup',function(e) {
  console.log("e",e)
  proxy.name = e.target.value;
})