跳到主要内容

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

· 2 分钟阅读
lzw.

聊到 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 数据双向绑定