vue.js 是采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。
具體實現步驟，感興趣的可以看看:
- 當把一個普通 Javascript 對象傳給 Vue 實例來作為它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 都加上 setter和getter 這樣的話，給這個對象的某個值賦值，就會觸發setter，那么就能監聽到了數據變化
- compile解析模板指令，將模板中的變量替換成數據，然后初始化渲染頁面視圖，並將每個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變動，收到通知，更新視圖
- Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是:
1、在自身實例化時往屬性訂閱器(dep)里面添加自己
2、自身必須有一個update()方法
3、待屬性變動dep.notice()通知時，能調用自身的update()方法，並觸發Compile中綁定的回調，則功成身退。 - MVVM作為數據綁定的入口，整合Observer、Compile和Watcher三者，通過Observer來監聽自己的model數據變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達到數據變化 -> 視圖更新；視圖交互變化(input) -> 數據model變更的雙向綁定效
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="myapp"> <input v-model="message" /><br> <span v-bind="message"></span> </div> <script type="text/javascript">
//vue實現數據雙向綁定的原理就是用Object.defineproperty()重新定義（set方法）對象設置屬性值和（get方法）獲取屬性值的操縱來實現的。
//Object.property()方法的解釋：Object.property(參數1，參數2，參數3) 返回值為該對象obj
//其中參數1為該對象（obj），參數2為要定義或修改的對象的屬性名，參數3為屬性描述符，屬性描述符是一個對象，主要有兩種形式：數據描述符和存取描述符。這兩種對象只能選擇一種使用，不能混合使用。而get和set屬於存取描述符對象的屬性。
//這個方法會直接在一個對象上定義一個新屬性或者修改對象上的現有屬性，並返回該對象。
var model = {
message: ""
};
var models = myapp.querySelectorAll("[v-model=message]");
for (var i = 0; i < models.length; i++) {
models[i].onkeyup = function() {
model[this.getAttribute("v-model")] = this.value;
}
}
// 觀察者模式 / 鈎子函數
// defineProperty 來定義一個對象的某個屬性
Object.defineProperty(model, "message", {
set: function(newValue) {
var binds = myapp.querySelectorAll("[v-bind=message]");
for (var i = 0; i < binds.length; i++) {
binds[i].innerHTML = newValue;
};
var models = myapp.querySelectorAll("[v-model=message]");
for (var i = 0; i < models.length; i++) {
models[i].value = newValue;
};
this.value = newValue;
},
get: function() {
return this.value;
}
})
</script>
</body>
</html>