MVC和MVVM已經(jīng)被談?wù)摿撕镁茫贿^還有些開發(fā)者并不是很清楚二者的區(qū)別赖瞒，因此在開發(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)退居其次伤哺。當年典型的類庫如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)更清晰戈泼，增加代碼的復用性婿禽。
四赏僧、基于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í)行指令綁定的相應回調(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模式中习瑰，前端人員只負責View（視圖）部分梧油。隨著MVVM模式的出現(xiàn)，前端可以自己寫業(yè)務(wù)邏輯以及渲染模板，后端只負責提供數(shù)據(jù)即可搬俊；前端能做的事情越來越多咕娄，在開發(fā)項目當中工作所占比重更大昌执，這樣一想是不是很開心了呢摄杂？
