vue数据绑定原理
2018-11-12 本文已影响18人
天字一等
实现原理：
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的.
1）数据劫持、vue是通过Object.defineProperty()来实现数据劫持，其中会有getter()和setter方法；当读取属性值时，就会触发getter()方法，在view中如果数据发生了变化，就会通
过Object.definePr
operty( )对属性设置一个setter函数，当数据改变了就会来触发这个函数；
简单实现方法：
<body>
<div id="app">
<input type="text" id="txt">
<p id="show-txt"></p>
</div>
<script>
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show-txt').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
</body>
