双向数据绑定

作者: Wang_Yong | 来源:发表于2018-02-06 16:08 被阅读0次

原生js模拟双向数据绑定
原理：选中元素，利用事件监听键盘事件keyup将target的值拿到，赋值给目标元素

<body>
    <input id="name" type="text" />
    <br />
    <span id="copy"></span>
</body>
<script>
    document.getElementById('name').addEventListener("keyup",function (event) {
        document.getElementById("copy").innerText = event.target.value;
    })
</script>

下面来介绍Vue的双向的数据实现原理：
主要是通过劫持get,set函数来实现

<body>
    <input id="name" type="text" />
    <br />
    <span id="copy"></span>
</body>
<script>
    document.getElementById('name').addEventListener("keyup",function (event) {
        obj.userName = event.target.value;
    })
    var obj = {
        age: 20
    };
    Object.defineProperty(obj,'userName',{
        get: function(){
            console.log("get init")
        },
        set: function(val){
            console.log("set init")
            document.getElementById("copy").innerText = val;
        }
    })
</script>