實現原理:
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>