MVC和MVVM已經(jīng)被談?wù)摿撕镁?，不過還有些開發(fā)者并不是很清楚二者的區(qū)別，因此在開發(fā)過程中會反復(fù)跌進同一個坑。那我們來梳理一下。
一、MVC——Model-View- Controller
M——model模型，獲取數(shù)據(jù)，處理數(shù)據(jù)邏輯。
V——view視圖，處理數(shù)據(jù)顯示。
C——Controller控制器，從視圖讀取數(shù)據(jù)，控制用戶輸入，并向模型發(fā)送數(shù)據(jù)。
簡單來說，MVC就是用Controller將Model的數(shù)據(jù)用View顯示出來。使用MVC的目的就是將M和V的代碼分離。MVC是單向通信，View跟Model必須通過Controller來連接。
二、MVVM——Model-View-ViewModel
隨著前端項目越來越大，項目的可維護性、可擴展性和安全性等成了主要問題，之前的瀏覽器兼容性問題已經(jīng)退居其次。當(dāng)年典型的類庫如jquery，只能解決瀏覽器兼容性問題，但沒有實現(xiàn)對業(yè)務(wù)邏輯的分成，所以維護性和擴展性較差，這才有了MVVM模式一類框架的出現(xiàn)。MVVM又是什么呢？
M——model模型，后端傳遞的數(shù)據(jù)。
V——View視圖。
VM——ViewModel視圖模型，是連接view和model的橋梁。
M和V不能直接通信，只能通過VM。VM要實現(xiàn)一個observer觀察者，VM監(jiān)聽到數(shù)據(jù)變化時，通知視圖做自動更新；VM監(jiān)聽到用戶操作的視圖的變化，會通知數(shù)據(jù)做改動，從而實現(xiàn)數(shù)據(jù)的雙向綁定。
三、MVC和MVVM的區(qū)別：
不難發(fā)現(xiàn)，二者的區(qū)別在于C和VM。是VM取代了C嗎？不是，而是弱化了C的概念，增加了一層VM，用來抽離C中的業(yè)務(wù)邏輯，其它視圖操作業(yè)務(wù)等還是放在C中實現(xiàn)。也就是說，MVVM實現(xiàn)的是業(yè)務(wù)邏輯組件的重用，使開發(fā)更高效，結(jié)構(gòu)更清晰，增加代碼的復(fù)用性。
四、基于MVVM實現(xiàn)的框架Vue.js
在vue中，Model是js中的數(shù)據(jù)，如對象、數(shù)組等；View是頁面視圖；VM是vue實例化對象。
1、初步了解四個東西：
- Observer監(jiān)聽器——監(jiān)聽data選項中屬性是被訪問或被改變，決定調(diào)用getter/setter。
- Compile指令解析器——解析元素節(jié)點的指令，初始化視圖，訂閱watcher來更新視圖。
- Watcher訂閱者——是Observer和Compile的橋梁，訂閱并收到屬性變動通知，執(zhí)行指令綁定的相應(yīng)回調(diào)函數(shù)。
- Dep消息訂閱器——它的內(nèi)部有一個用來收集訂閱者的數(shù)組，數(shù)據(jù)變動觸發(fā)notify函數(shù)，再調(diào)用訂閱者的update方法。
2、如何實現(xiàn)雙向綁定
（1）初始化階段：
① 監(jiān)聽：Observer把js對象傳給vue實例的data選項，vue遍歷data選項中的屬性，并用Object.defineProperty()方法將這些屬性轉(zhuǎn)成setter/getter方法，實現(xiàn)監(jiān)聽功能；
② Compile指令編譯器，解析元素節(jié)點的指令，初始化視圖，并訂閱Watcher來更新視圖；
③ watcher將自己添加到消息訂閱器Dep，初始化完畢。
（2）數(shù)據(jù)變化時：
① Observer 中的 setter 方法被觸發(fā)，setter調(diào)用Dep.notify()；
② Dep開始遍歷所有訂閱者，并調(diào)用訂閱者的 update 方法；
③ 訂閱者收到通知后，更新視圖。
如果你覺得我還沒說清楚，請看下圖：
在傳統(tǒng)的MVC模式中，前端人員只負責(zé)View（視圖）部分。隨著MVVM模式的出現(xiàn)，前端可以自己寫業(yè)務(wù)邏輯以及渲染模板，后端只負責(zé)提供數(shù)據(jù)即可；前端能做的事情越來越多，在開發(fā)項目當(dāng)中工作所占比重更大，這樣一想是不是很開心了呢？
