https://blog.csdn.net/u013282174/article/details/51220199
http://www.reibang.com/p/b0aab1ffad93
MVVM
1. Mvvm定義MVVM是Model-View-ViewModel的簡寫堵未。即模型-視圖-視圖模型杜恰。
【模型】指的是后端傳遞的數據荆萤。
【視圖】指的是所看到的頁面瘦赫。
【視圖模型】mvvm模式的核心股淡，它是連接view和model的橋梁却舀。
它有兩個方向：一是將【模型】轉化成【視圖】宫屠，即將后端傳遞的數據轉化成所看到的頁面豹爹。實現(xiàn)的方式是：數據綁定责蝠。二是將【視圖】轉化成【模型】，即將所看到的頁面轉化成后端的數據萎庭。實現(xiàn)的方式是：DOM 事件監(jiān)聽霜医。這兩個方向都實現(xiàn)的，我們稱之為數據的雙向綁定驳规。
總結：在MVVM的框架下視圖和模型是不能直接通信的肴敛。它們通過ViewModel來通信，ViewModel通常要實現(xiàn)一個observer觀察者吗购，當數據發(fā)生變化医男，ViewModel能夠監(jiān)聽到數據的這種變化，然后通知到對應的視圖做自動更新捻勉，而當用戶操作視圖镀梭，ViewModel也能監(jiān)聽到視圖的變化，然后通知數據做改動踱启，這實際上就實現(xiàn)了數據的雙向綁定报账。并且MVVM中的View 和 ViewModel可以互相通信。MVVM流程圖如下：
MVP
1. MVC的定義：MVC是Model-View- Controller的簡寫埠偿。即模型-視圖-控制器透罢。M和V指的意思和MVVM中的M和V意思一樣。
C即Controller指的是頁面業(yè)務邏輯冠蒋。使用MVC的目的就是將M和V的代碼分離羽圃。‘MVC是單向通信浊服。也就是View跟Model统屈，必須通過Controller來承上啟下。
MVC和MVVM的區(qū)別并不是VM完全取代了C牙躺，ViewModel存在目的在于抽離Controller中展示的業(yè)務邏輯愁憔，而不是替代Controller，其它視圖操作業(yè)務等還是應該放在Controller中實現(xiàn)孽拷。也就是說MVVM實現(xiàn)的是業(yè)務邏輯組件的重用吨掌。
由于mvc出現(xiàn)的時間比較早，前端并不那么成熟脓恕，很多業(yè)務邏輯也是在后端實現(xiàn)膜宋，所以前端并沒有真正意義上的MVC模式。而我們今天再次提起MVC炼幔，是因為大前端的來到秋茫，出現(xiàn)了MVVM模式的框架，我們需要了解一下MVVM這種設計模式是如何一步步演變過來的乃秀。
MVVM溯源
2. 為什么會有MVVM框架肛著？在過去的10年中圆兵，我們已經把很多傳統(tǒng)的服務端代碼放到了瀏覽器中，這樣就產生了成千上萬行的javascript代碼枢贿，它們連接了各式各樣的HTML 和CSS文件殉农，但缺乏正規(guī)的組織形式，這也就是為什么越來越多的開發(fā)者使用javascript框架局荚。比如：angular超凳、react、vue耀态。瀏覽器的兼容性問題已經不再是前端的阻礙轮傍。前端的項目越來越大，項目的可維護性和擴展性茫陆、安全性等成了主要問題金麸。當年為了解決瀏覽器兼容性問題，出現(xiàn)了很多類庫簿盅，其中最典型的就是jquery。但是這類庫沒有實現(xiàn)對業(yè)務邏輯的分成揍魂，所以維護性和擴展性極差桨醋。綜上兩方面原因，才有了MVVM模式一類框架的出現(xiàn)现斋。比如vue,通過數據的雙向綁定喜最，極大了提高了開發(fā)效率。
3. MVVM框架:VUE的介紹Vue就是基于MVVM模式實現(xiàn)的一套框架庄蹋，在vue中：Model:指的是js中的數據瞬内，如對象，數組等等限书。View:指的是頁面視圖viewModel:指的是vue實例化對象為什么說VUE是一個漸進式的javascript框架, 漸進式是什么意思虫蝶？
1.如果你已經有一個現(xiàn)成的服務端應用，你可以將vue 作為該應用的一部分嵌入其中倦西，帶來更加豐富的交互體驗;
2.如果你希望將更多業(yè)務邏輯放到前端來實現(xiàn)能真，那么VUE的核心庫及其生態(tài)系統(tǒng)也可以滿足你的各式需求（core+vuex+vue-route）。和其它前端框架一樣扰柠，VUE允許你將一個網頁分割成可復用的組件粉铐，每個組件都包含屬于自己的HTML、CSS卤档、JAVASCRIPT以用來渲染網頁中相應的地方蝙泼。
3.如果我們構建一個大型的應用，在這一點上劝枣，我們可能需要將東西分割成為各自的組件和文件汤踏，vue有一個命令行工具倡缠，使快速初始化一個真實的工程變得非常簡單（vue init webpack my-project）。我們可以使用VUE的單文件組件茎活，它包含了各自的HTML昙沦、JAVASCRIPT以及帶作用域的CSS或SCSS。以上這三個例子载荔，是一步步遞進的盾饮，也就是說對VUE的使用可大可小，它都會有相應的方式來整合到你的項目中懒熙。所以說它是一個漸進式的框架丘损。VUE最獨特的特性：響應式系統(tǒng)VUE是響應式的（reactive），也就是說當我們的數據變更時工扎，VUE會幫你更新所有網頁中用到它的地方徘钥。關于這個響應式原理，官方已經講得很清楚肢娘，不懂的同學呈础，可以https://cn.vuejs.org/v2/guide/reactivity.html 查看。我們講一下主流框架實現(xiàn)雙向綁定（響應式）的做法：
1. 臟值檢查：angularangular.js 是通過臟值檢測的方式比對數據是否有變更橱健，來決定是否更新視圖而钞，最簡單的方式就是通過 setInterval() 定時輪詢檢測數據變動，當然Google不會這么low拘荡，angular只有在指定的事件觸發(fā)時進入臟值檢測臼节，大致如下：?DOM事件，譬如用戶輸入文本珊皿，點擊按鈕等网缝。( ng-click )?XHR響應事件 ( $http )?瀏覽器Location變更事件 ( $location )?Timer事件( $timeout , $interval )?執(zhí)行 $digest() 或 $apply()在 Angular 中組件是以樹的形式組織起來的，相應地蟋定，檢測器也是一棵樹的形狀粉臊。當一個異步事件發(fā)生時，臟檢查會從根組件開始溢吻，自上而下對樹上的所有子組件進行檢查维费，這種檢查方式的性能存在很大問題。
2.觀察者-訂閱者（數據劫持）：vueObserver 數據監(jiān)聽器促王，把一個普通的 JavaScript 對象傳給 Vue 實例的 data 選項犀盟，Vue 將遍歷此對象所有的屬性，并使用Object.defineProperty()方法把這些屬性全部轉成setter蝇狼、getter方法阅畴。當data中的某個屬性被訪問時，則會調用getter方法迅耘，當data中的屬性被改變時贱枣，則會調用setter方法监署。Compile指令解析器，它的作用對每個元素節(jié)點的指令進行解析纽哥，替換模板數據钠乏，并綁定對應的更新函數，初始化相應的訂閱春塌。Watcher 訂閱者晓避，作為連接 Observer 和 Compile 的橋梁，能夠訂閱并收到每個屬性變動的通知只壳，執(zhí)行指令綁定的相應回調函數俏拱。Dep 消息訂閱器，內部維護了一個數組吼句，用來收集訂閱者（Watcher）锅必，數據變動觸發(fā)notify 函數，再調用訂閱者的 update 方法惕艳。執(zhí)行流程如下：
從圖中可以看出搞隐，當執(zhí)行 new Vue() 時，Vue 就進入了初始化階段尔艇，一方面Vue 會遍歷 data 選項中的屬性尔许，并用 Object.defineProperty 將它們轉為 getter/setter，實現(xiàn)數據變化監(jiān)聽功能终娃；另一方面，Vue 的指令編譯器Compile 對元素節(jié)點的指令進行解析蒸甜，初始化視圖棠耕，并訂閱Watcher 來更新視圖， 此時Wather 會將自己添加到消息訂閱器中(Dep),初始化完畢柠新。當數據發(fā)生變化時窍荧，Observer 中的 setter 方法被觸發(fā)，setter 會立即調用Dep.notify()恨憎，Dep 開始遍歷所有的訂閱者蕊退，并調用訂閱者的 update 方法，訂閱者收到通知后對視圖進行相應的更新憔恳。因為VUE使用Object.defineProperty方法來做數據綁定瓤荔，而這個方法又無法通過兼容性處理，所以Vue 不支持 IE8 以及更低版本瀏覽器钥组。另外输硝，查看vue原代碼，發(fā)現(xiàn)在vue初始化實例時程梦， 有一個proxy代理方法点把，它的作用就是遍歷data中的屬性橘荠，把它代理到vm的實例上，這也就是我們可以這樣調用屬性：vm.aaa等于vm.data.aaa郎逃。好了哥童，關于mvvm設計模式及vue的雙向綁定原理就講到這。說實話褒翰，寫這篇文章很費腦子贮懈，我們也參考了很多人的文章，可以說是總結的一個大雜燴影暴。最近這兩年Vue太火了错邦，不懂VUE都不好意思說自己是干前端的，程序思維現(xiàn)在正著力把之前寫的項目改造成vue的方式型宙，目前已遇到了一堆坑撬呢，之后我們會把vue實戰(zhàn)過程中的坑給大家總結一下，方便大家更好的學習妆兑。歡迎您繼續(xù)關注程序思維魂拦。
