前一篇用 Object.defineProperty 的 get、set 實作了簡單的資料綁定，但 Vue 的響應式還需要檢測何時更改、何時訪問屬性，以及允許 Vue 追蹤 data 之間的依賴關係。

MVVM 軟體架構

MVVM，是 Model-View-ViewModel 的簡寫，也就是模型-視圖-視圖模型。

• Model： 簡單來說就是資料。資料物件(data)。
• View: 檢視畫面
• ViewModel: MVVM 架構的核心，ViewModel 是用來當作 View 和 Model 的橋樑，要做幾件事
  • 用資料綁定方式將後端回傳數據轉成畫面
  • 用 DOM 事件監聽將畫面轉成後端數據
  • 以上兩點方向都實現稱為資料雙向綁定

那 Vue 是如何建立模型和視圖之間的關聯呢？

Vue 的 MVVM 架構

• Model： 是指 vm.$data
• View: 是指 vm.$el
• ViewModel: 是指 var vm = new Vue({ /* options */ })

從數據改變到視圖改變，ViewModel 通過 Observer, Dep, Watcher, Compiler 一系列的關聯，最後和視圖建立關聯改變。

先做一個簡單的對應關係

• Observer: 觀察者、Model、vm.$data
• Compile: View、vm.$el
• Watcher: 訂閱者、ViewModel、var vm = new Vue({ /* options */ })
• Dep: 訂閱者清單

Vue 在這裡主要處理幾件事

• Observer 對 data 物件的所有屬性做監聽，如有變動利用Object.defineProperty 的 getter 和 setter 可以發現，但 data 物件不可能只有一層，所以設定屬性時，要一層層深入，讓我們可以觀察到變動

• 我們在觀察到變動時需要通知要變動的所有程式碼，因為有太多地方要知道變動，所以他們透過訂閱變動通知來得知，而這些就稱為 Watcher

• 我們要怎麼知道 Watcher 想訂閱哪些屬性的變動？透過訂閱清單獲得，清單裡紀錄的這些屬性，是從 getter 獲取這個屬性的值，在觸發 setter（也就是變動）時，通知訂閱清單的 Watcher

• 在 View 層，透過 compiler 把 el 與其下面的子元素編譯，然後解析出 Directive，得到每個 Directive 的 update 方法。

• 當數據變動時，會觸發 Observer 的 Dep 上的 notify 方法來通知對應的 Watcher update 方法，接著觸發 Directive 的 update 方法來更新視圖