简单理解 vue.js 数据双向绑定的原理

聊到 vue.js 数据双向绑定，就不得不提 Object.defineProperty 方法，它是实现数据双向绑定原理所在。先上代码再解释

<div id="view">view层</div>
<input id="model" type="text" value="model层">
<script>
    //单向绑定
    document.getElementById('model').onkeyup = function(e){
        document.getElementById('view').innerHTML = e.target.value
    }
    var obj = {}
    Object.defineProperty(obj,'propertyName',{
        get:function(){
            return obj
        },
        set:function(newVal){
            document.getElementById('view').innerHTML = newVal
            document.getElementById('model').value = newVal
        }
    })
    //双向绑定
    setTimeout(function(){
        obj.propertyName = '测试数据'
    },3000)
</script>

以上有两个分别模拟 view 层和 model 层的 dom 元素

<div id="view">view层</div>
<input id="model" type="text" value="model层">

对于单向绑定，通过 js 事件也可以实现，如以上代码中的 onkeyup 事情，就实现了 model->view 的绑定

那么双向绑定即： model<->view 的绑定，就需要 Object.defineProperty 来实现，例如测试代码：

setTimeout(function(){
    obj.propertyName = '测试数据'
},3000)

3秒后执行 view 和 model 的值都为 '测试数据'，这样就简单模拟了 vue.js 数据双向绑定