嘗試總結一下Vue的響應式機制。主要是core/observer裏面的代碼。如果能把這些代碼抽出來實現一個自己的簡單的響應式就好了，目標是一個能夠監聽數據變化的小型demo框架，監聽後把事件暴露出來，具體要做什麼讓監聽回調函數去做，並不包括在響應式系統中。
從入口文件中規中矩的開始吧
core/observer/index.js
這個文件導出了五個內容：
- Observer
- observe
- defineReactive
- set
- del
Observer
這個類是響應式頂重要的類了吧。從名字上也能看出來，這是監聽者。設計模式中就有這一個模式，監聽者模式，四人幫的設計模式中文版裏叫觀察者模式，叫啥都一樣，能理解意思就行吧，嘻嘻。或許觀察者更貼切，那監聽者這個詞啥咋到我腦子裏的，哎，還是不免要想想:(
Observer的註釋已經很能說明它的用途了
/**
* Observer class that is attached to each observed
* object. Once attached, the observer converts the target
* object's property keys into getter/setters that
* collect dependencies and dispatch updates.
*/
響應式系統涉及的類還是很多的，看來還是有可能畫一個類之間的交互圖的。
to be continue
讀着讀着，我發現響應式不只在core/observer中，它還散落在別得文件裏，比如core/global-api/extend.js會有，這裏面其實是使用響應式的地方。
還是把響應式的內容分開來寫吧，一篇文章寫不完。這篇只寫大體過程，子篇寫實現細節，這樣可能比較好。
大致過程
我們都知道響應式(reactive)的的含義，大體可以這樣說，數據改變了，依賴數據的視圖會自動改變。這大概就是響應式了，達到了數據驅動的目的，讓我們不再聚焦視圖的修改。
那麼Vue是怎麼做到的呢？
這裏要拋出幾個類，它們是參與響應式的主角。
- Observer
- Dep
- Watcher
它們的關係是怎樣的呢？
在我看來Observer跟Dep和Watcher沒有直接關係，響應式主要應該是由Dep和Watcher來完成的，它倆纔是核心。
Dep是在調用defineReactive時創建的，會形成一個閉包。在這個閉包內會調用defineProperty來定義對象的屬性。Vue的響應式就是基於defineProperty來實現的，而defineProperty是ES5纔出現的，而且是不能模擬的，因此不支持ES5的瀏覽器上是不能運行Vue的，這就包括IE8及以下版本。
繼續說回defineProperty，它定義了get和set。在get裏面，會把上面說的Dep實例跟當前的Watcher實例綁定，dep.depend()的調用。而在set裏面會調用dep.notify來通知跟Dep實例相關的Watcher實例來進行update。
總結下來，Dep實例是跟對象的屬性的get和set關聯的，而Watcher實例是跟更新操作關聯的，因爲在創建Watcher實例是都是要求傳入一個cb的，這個cb就會做一些更新操作。
描述一下響應式觸發的過程。
setter -> dep.notify -> watcher.update -> cb()
說一下Watcher是怎麼跟視圖的刷新關聯上的呢，從上面的內容可以知道，視圖的刷新一定是放在了cb裏咯。很可惜，錯了！！:(具體還是看下面watcher的文章吧
- Watcher
- Dep
- Observer
本文還會慢慢完善的
有用請點贊，嘻嘻:)