MVC Model、View、Controller

　　1）最上面的一層，是直接面向終端使用者的"檢視層"（View）。它是提供給使用者的操作介面，是程式的外殼。

　　2）最底下的一層，是核心的"資料層"（Model），也就是程式需要操作的資料或資訊。

　　3）中間的一層，就是"控制層"（Controller），它負責根據使用者從"檢視層"輸入的指令，選取"資料層"中的資料，然後對其進行相應的操作，產生最終結果。

 　　那這樣Model和View就是相互獨立的。View只負責頁面的展示，Model只是資料的儲存，那麼也就達到了解耦和重用的目的。

MVVM 雙向資料繫結

mvvm是一種設計思想，M表示Model，V表示檢視View，VM表示資料與模型（區別MVC中，C是用於跳轉至哪個頁面，而VM只是將資料進行轉換或者封裝）：

VM是mvvm模式的核心，它是連線view、model的橋樑。有兩個方向：一是將【模型】轉化成【檢視】，即將後端傳遞的資料轉化成所看到的頁面。實現的方式是：資料繫結。二是將【檢視】轉化成【模型】，即將所看到的頁面轉化成後端的資料。實現的方式是：DOM 事件監聽。這兩個方向都實現的，我們稱之為資料的雙向繫結。

在MVVM的框架下檢視和模型是不能直接通訊的。它們通過ViewModel來通訊，ViewModel通常要實現一個observer觀察者，當資料發生變化，ViewModel能夠監聽到資料的這種變化，然後通知到對應的檢視做自動更新，而當用戶操作檢視，ViewModel也能監聽到檢視的變化，然後通知資料做改動，這實際上就實現了資料的雙向繫結。

觀察者-訂閱者(資料劫持)

　　vue Observer 資料監聽器，把一個普通的 JavaScript 物件傳給 Vue 例項的 data 選項，Vue 將遍歷此物件所有的屬性，並使用Object.defineProperty()方法把這些屬性全部轉成setter、getter方法。當data中的某個屬性被訪問時，則會呼叫getter方法，當data中的屬性被改變時，則會呼叫setter方法。

　　當執行 new Vue() 時，Vue 就進入了初始化階段，一方面Vue 會遍歷 data 選項中的屬性，並用 Object.defineProperty 將它們轉為 getter/setter，實現資料變化監聽功能；另一方面，Vue 的指令編譯器Compile 對元素節點的指令進行解析，初始化檢視，並訂閱Watcher 來更新檢視， 此時Wather 會將自己新增到訊息訂閱器中(Dep),初始化完畢。當資料發生變化時，Observer 中的 setter 方法被觸發，setter 會立即呼叫Dep.notify()，Dep 開始遍歷所有的訂閱者，並呼叫訂閱者的 update 方法，訂閱者收到通知後對檢視進行相應的更新。

區別：

　　MVC和MVVM的區別並不是VM完全取代了C，ViewModel存在目的在於抽離Controller中展示的業務邏輯，而不是替代Controller，其它檢視操作業務等還是應該放在Controller中實現。也就是說MVVM實現的是業務邏輯元件的重用。由於mvc出現的時間比較早，前端並不那麼成熟，很多業務邏輯也是在後端實現，所以前端並沒有真正意義上的MVC模式。而我們今天再次提起MVC，是因為大前端的來到，出現了MVVM模式的框架，我們需要了解一下MVVM這種設計模式是如何一步步演變過來的。