简单理解 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 数据双向绑定

小刘

爱生活,爱技术

你可能也会喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注