Vue3.0双向数据绑定

---

    html代码：
    <input type="text" id="ipt" >
    <p id="op"></p>
    JavaScript代码： 
    let obj = {
        txtVal:"默认值"
    }
    function myReactive(obj){
        return new Proxy(obj,{
            get(target, property){
                return target[property]
            },
            set(target, property, newVal){
                //  修改界面的数据
                ipt.value =newVal
                op.innerHTML =newVal
                target[property]=newVal
            }
        })    
    }
    // 创建代理对象
    let newObj = myReactive(obj);
    // console.log(newObj.txtVal);

    // 初始数据渲染
    ipt.value = newObj.txtVal
    op.innerHTML =  newObj.txtVal
    ipt.addEventListener("input",e=>{
        // console.log(e.target.value);
        newObj.txtVal = e.target.value; // 触发set方法
    })
    // 一定要触发set，才能够修改到界面的数据。 
    // 因为 Object.defineproperty 如果对象是数组，不会触发set。所以在Vue2.0中，数组并不是响应式的。
    // 因为new Proxy 可以对数组进行代理，修改数组中数据的时候，也会触发set。 一旦触发set，就可以在set中去修改界面的数据，做到响应式效果，