JS ES6用Proxy模拟一个简单的数据双向绑定

什么是数据双向绑定

双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是vue的精髓之处了。
接下来简单的模拟一下：

<input type="text" id="myText">
    <p id="myP"></p>
 
 <script>
        //      用proxy代理 模拟实现vue双向绑定
        let myText =document.getElementById("myText");
        let myP =document.getElementById("myP");
        let obj = {
            myText : "长路漫漫，唯剑作伴。吾之荣耀，离别已久。",
        };
        //  代理对象
        let proxyObj = new Proxy(obj,{
            get : function(target,propKey){  // target 受理对象 propKey 属性
                return target[propKey];
            } ,
            set : function(target, propKey , value){  //target 受理对象 propKey 属性  value 属性值
                myText.value = value;  // 将文本框新的值赋值覆盖以前的值
                myP.innerText = myText.value; // 将文本框的值 赋值给文本段落
            },
        })
        //  1 .触发set 将文本框显示值
         proxyObj.myText = obj.myText;  
        //  2 .实现双向绑定 文本框里面的值变化 obj对象的值更新 更新其他元素的值
        myText.addEventListener("input", function(){
             proxyObj.myText= this.value;  // this指向的是myText 
        })
    </script>