vue中的數(shù)據(jù)雙向綁定給我們在對數(shù)據(jù)進行操作的時候提供了非常大的便利，這里淺顯的實現(xiàn)下vue中的數(shù)據(jù)雙向綁定
關鍵詞： Object.defineProperty
要實現(xiàn)vue數(shù)據(jù)雙向綁定，首先得了解Object.defineProperty這個方法。
Object.defineProperty(obj, prop, descriptor)
參數(shù)詳解：
obj：要在其上定義屬性的對象。
prop：要定義或修改的屬性的名稱。
descriptor：將被定義或修改的屬性描述符。
這個方法主要是精確的添加或者修改對象的屬性。
一個對象的屬性分為以下幾種：
vaule: 屬性對應的值，
configurable： 屬性是否可以被配置
enumerable：屬性是否能被枚舉
writable: 屬性是否能被重寫
get：給屬性提供getter方法
set：給屬性提供setter方法
這里舉個例子：
var obj = {
name: ''
}
var val = 456;
Object.defineProperty(obj,'name',{
set: function(value) {
val = value
},
get: function() {
return val
}
})
console.log(obj.name) // 456
從上面我們可以看到Object.defineProperty的大致用法，改變了obj的name屬性
通過get提供的getter，獲取了val的值，通過set提供的setter方法，設置name的值
具體實現(xiàn)一個輸入框的雙向數(shù)據(jù)綁定，input輸入框的值發(fā)生變化時候，div做相應的顯示。
<!--html-->
<input type="text" id="demo">
<div id="show"></div>
vue中的數(shù)據(jù)雙向綁定是訂閱者模式加數(shù)據(jù)劫持，我們簡單模擬下。
- 定義要監(jiān)聽的對象
var data = {};
- 監(jiān)聽input輸入框的keyup事件
document.getElementById('demo').addEventListener('keyup',function (e) {
data.val = e.target.value;
},false)
- 用Object.defineProperty劫持監(jiān)聽的對象，然后賦值給div顯示
Object.defineProperty(data,'val',{
set: function (value) {
document.getElementById('show').innerHTML = value;
}
})
