Vue.js最顯著的一個功能是響應系統--修改Model層的數據,會造成對應View層的更新.這是一個比較方便管理模式,使用戶在管理View和Model時變的簡單直觀.其內部實現是把一個普通對象傳給Vue實例作為它的data選項,Vue.js將遍歷它的屬性，用Object.defineProperty將它們轉為getter/setter(這一過程發生在解析階段),利用這個ES5的特性,Vue實現了數據的雙向綁定.
在創建數據綁定時,Vue會建立起一個watcher對象,所以當setter被調用時,就會觸發watcher重新計算,導致關聯指令更新Dom視圖.上面提到的只是Vue對數據雙向綁定的大體的實現,至于其中可能碰到的細節問題,就不贅述了.畢竟實現思路和實現細節是兩個概念層的東西,有興趣的同學可以到官網上研究下,這里主要講解下Object.defineProperty方法.
Object.defineProperty 方法
Object.defineProperty是ECMAScript5.1（ECMA-262）中定義的標準屬性,該方法提供了一種直接的方式來定義對象屬性或者修改已有對象屬性。其方法原型如下:
Object.defineProperty(obj, prop, descriptor)
- obj :目標對象prop ,需要定義的屬性或方法的名字。
- descriptor:待修改屬性的相關描述descriptor 目標屬性所擁有的特性，其默認值如下:
/**
* @{param} descriptor
*/
{
configurable: false,
enumerable: false,
writable: false,
value: null,
set: undefined,
get: undefined
}
- configurable:屬性是否可配置。
可配置的含義包括：是否可以刪除屬性(delete),是否可以修改屬性的 writable,enumerable,configurable屬性。 - enumerable ，屬性是否可枚舉。可枚舉的含義包括：是否可以通過 for...in 遍歷到，是否可以通過 Object.keys() 方法獲取屬性名稱。
- writable ，屬性是否可重寫。可重寫的含義包括：是否可以對屬性進行重新賦值。
- value ，屬性的默認值。
- set ，設置鉤子函數.屬性被設置時觸發。
- get ，獲取鉤子函數.屬性讀取時觸發。
以下是一個實現數據和視圖綁定的例子:
<div>
<p>你好:<span id='nickName'></span></p>
<p>你想要做什么:<span id="introduce"></span></p> <br/>
<input oninput="setName(this)" placeholder="請輸入你的姓名">
<input oninput="setThing(this)" placeholder="輸入你要做的是事">
</div>
<script>
//視圖控制器
var userInfo = {};
Object.defineProperty(userInfo, "nickName", {
get: function(){
return document.getElementById('nickName').innerHTML;
},
set: function(nick){ document.getElementById('nickName').innerHTML = nick;
}
});
Object.defineProperty(userInfo, "introduce", {
get: function(){
return document.getElementById('introduce').innerHTML;
},
set: function(introduce){ document.getElementById('introduce').innerHTML = introduce; }
});
function setName(e) {
userInfo.nickName = e.value;
}
function setThing(e) {
userInfo.introduce = e.value;
}
</script>
上面代碼有很多問題,只為演示相關原理的實現.Vue對這塊的實現應該是比較復雜的,但核心方法使用應該相同.下一章我們會深入生存周期和組件方面的研究
