[TOC]
參考文章: [剖析Vue原理&實現雙向綁定MVVM](https://segmentfault.com/a/1190000006599500)
* Observer: 劫持并監聽 `data` 中的屬性,在屬性發生變化時通知訂閱者
* Watcher: 往屬性訂閱器 `dep` 中添加自己,在屬性變動通知時,調用自身的 `udate()` 方法,并觸發 `compile` 中綁定的回調
* Compile: 解析模板指令,將模板中的變量替換成數據,然后初始化渲染頁面視圖,并將每個指令對應的節點綁定更新函數,添加監聽數據的訂閱者,一旦數據有變動,收到通知,更新視圖

## 數據響應式原理
>[success] vue會把data中的屬性通過 `Object.defineProperty` 添加setter和getter,在數據賦值時,會自動觸發setter
~~~
// vue watch 的一部分源碼:
function defineProperty(data, key, val) {
let _value = data[key];
let childObj = observer(_value);
let dep = new Dep(); //生成一個調度中心,管理此字段的所有訂閱者
Object.defineProperty(data, key, {
enumerable: true, // 可枚舉
configurable: false, // 不能再define
get: function() {
if (Dep.target) {
dep.depend();
}
return val;
},
set: function(value) {
val = value;
childObj = observer(value);
dep.notify();
}
})
}
~~~
