1. Mvvm定義MVVM是Model-View-ViewModel的簡寫。即模型-檢視-檢視模型。【模型】指的是後端傳遞的資料。【檢視】指的是所看到的頁面。【檢視模型】mvvm模式的核心,它是連線view和model的橋樑。它有兩個方向:一是將【模型】轉化成【檢視】,即將後端傳遞的資料轉化成所看到的頁面。實現的方式是:資料繫結。二是將【檢視】轉化成【模型】,即將所看到的頁面轉化成後端的資料。實現的方式是:DOM 事件監聽。這兩個方向都實現的,我們稱之為資料的雙向繫結。總結:在MVVM的框架下檢視和模型是不能直接通訊的。它們通過ViewModel來通訊,ViewModel通常要實現一個observer觀察者,當資料發生變化,ViewModel能夠監聽到資料的這種變化,然後通知到對應的檢視做自動更新,而當用戶操作檢視,ViewModel也能監聽到檢視的變化,然後通知資料做改動,這實際上就實現了資料的雙向繫結。並且MVVM中的View 和 ViewModel可以互相通訊。MVVM流程圖如下:

1. MVC的定義:MVC是Model-View- Controller的簡寫。即模型-檢視-控制器。M和V指的意思和MVVM中的M和V意思一樣。C即Controller指的是頁面業務邏輯。使用MVC的目的就是將M和V的程式碼分離。‘MVC是單向通訊。也就是View跟Model,必須通過Controller來承上啟下。MVC和MVVM的區別並不是VM完全取代了C,ViewModel存在目的在於抽離Controller中展示的業務邏輯,而不是替代Controller,其它檢視操作業務等還是應該放在Controller中實現。也就是說MVVM實現的是業務邏輯元件的重用。由於mvc出現的時間比較早,前端並不那麼成熟,很多業務邏輯也是在後端實現,所以前端並沒有真正意義上的MVC模式。而我們今天再次提起MVC,是因為大前端的來到,出現了MVVM模式的框架,我們需要了解一下MVVM這種設計模式是如何一步步演變過來的。2. 為什麼會有MVVM框架?在過去的10年中,我們已經把很多傳統的服務端程式碼放到了瀏覽器中,這樣就產生了成千上萬行的javascript程式碼,它們連線了各式各樣的HTML 和CSS檔案,但缺乏正規的組織形式,這也就是為什麼越來越多的開發者使用javascript框架。比如:angular、react、vue。瀏覽器的相容性問題已經不再是前端的阻礙。前端的專案越來越大,專案的可維護性和擴充套件性、安全性等成了主要問題。當年為了解決瀏覽器相容性問題,出現了很多類庫,其中最典型的就是jquery。但是這類庫沒有實現對業務邏輯的分成,所以維護性和擴充套件性極差。綜上兩方面原因,才有了MVVM模式一類框架的出現。比如vue,通過資料的雙向繫結,極大了提高了開發效率。3. MVVM框架:VUE的介紹Vue就是基於MVVM模式實現的一套框架,在vue中:Model:指的是js中的資料,如物件,陣列等等。View:指的是頁面檢視viewModel:指的是vue例項化物件為什麼說VUE是一個漸進式的javascript框架, 漸進式是什麼意思?1.如果你已經有一個現成的服務端應用,你可以將vue 作為該應用的一部分嵌入其中,帶來更加豐富的互動體驗;2.如果你希望將更多業務邏輯放到前端來實現,那麼VUE的核心庫及其生態系統也可以滿足你的各式需求(core+vuex+vue-route)。和其它前端框架一樣,VUE允許你將一個網頁分割成可複用的元件,每個元件都包含屬於自己的HTML、CSS、JAVASCRIPT以用來渲染網頁中相應的地方。3.如果我們構建一個大型的應用,在這一點上,我們可能需要將東西分割成為各自的元件和檔案,vue有一個命令列工具,使快速初始化一個真實的工程變得非常簡單(vue init webpack my-project)。我們可以使用VUE的單檔案元件,它包含了各自的HTML、JAVASCRIPT以及帶作用域的CSS或SCSS。以上這三個例子,是一步步遞進的,也就是說對VUE的使用可大可小,它都會有相應的方式來整合到你的專案中。所以說它是一個漸進式的框架。VUE最獨特的特性:響應式系統VUE是響應式的(reactive),也就是說當我們的資料變更時,VUE會幫你更新所有網頁中用到它的地方。關於這個響應式原理,官方已經講得很清楚,不懂的同學,可以https://cn.vuejs.org/v2/guide/reactivity.html 檢視。我們講一下主流框架實現雙向繫結(響應式)的做法:1. 髒值檢查:angularangular.js 是通過髒值檢測的方式比對資料是否有變更,來決定是否更新檢視,最簡單的方式就是通過 setInterval() 定時輪詢檢測資料變動,當然Google不會這麼low,angular只有在指定的事件觸發時進入髒值檢測,大致如下: DOM事件,譬如使用者輸入文字,點選按鈕等。( ng-click ) XHR響應事件 ( $http ) 瀏覽器Location變更事件 ( $location ) Timer事件( $timeout , $interval ) 執行 $digest() 或 $apply()在 Angular 中元件是以樹的形式組織起來的,相應地,檢測器也是一棵樹的形狀。當一個非同步事件發生時,髒檢查會從根元件開始,自上而下對樹上的所有子元件進行檢查,這種檢查方式的效能存在很大問題。2.觀察者-訂閱者(資料劫持):vueObserver 資料監聽器,把一個普通的 JavaScript 物件傳給 Vue 例項的 data 選項,Vue 將遍歷此物件所有的屬性,並使用Object.defineProperty()方法把這些屬性全部轉成setter、getter方法。當data中的某個屬性被訪問時,則會呼叫getter方法,當data中的屬性被改變時,則會呼叫setter方法。Compile指令解析器,它的作用對每個元素節點的指令進行解析,替換模板資料,並繫結對應的更新函式,初始化相應的訂閱。Watcher 訂閱者,作為連線 Observer 和 Compile 的橋樑,能夠訂閱並收到每個屬性變動的通知,執行指令繫結的相應回撥函式。Dep 訊息訂閱器,內部維護了一個數組,用來收集訂閱者(Watcher),資料變動觸發notify 函式,再呼叫訂閱者的 update 方法。執行流程如下:

從圖中可以看出,當執行 new Vue() 時,Vue 就進入了初始化階段,一方面Vue 會遍歷 data 選項中的屬性,並用 Object.defineProperty 將它們轉為 getter/setter,實現資料變化監聽功能;另一方面,Vue 的指令編譯器Compile 對元素節點的指令進行解析,初始化檢視,並訂閱Watcher 來更新檢視, 此時Wather 會將自己新增到訊息訂閱器中(Dep),初始化完畢。當資料發生變化時,Observer 中的 setter 方法被觸發,setter 會立即呼叫Dep.notify(),Dep 開始遍歷所有的訂閱者,並呼叫訂閱者的 update 方法,訂閱者收到通知後對檢視進行相應的更新。因為VUE使用Object.defineProperty方法來做資料繫結,而這個方法又無法通過相容性處理,所以Vue 不支援 IE8 以及更低版本瀏覽器。另外,檢視vue原始碼,發現在vue初始化例項時, 有一個proxy代理方法,它的作用就是遍歷data中的屬性,把它代理到vm的例項上,這也就是我們可以這樣呼叫屬性:vm.aaa等於vm.data.aaa。好了,關於mvvm設計模式及vue的雙向繫結原理就講到這。