【模型】指的是後端傳遞的數據。 【視圖】指的是所看到的⻚面。 【視圖模型】mvvm模式的核⼼,它是鏈接view和model的橋樑梁。javascript
一、是將【模型】轉化成【視圖】,即將後端傳遞的數據轉化成所看到的⻚面。實現的方式是:數據綁定。 二、是將【視圖】轉化成【模型】,即將所看到的頁面轉化成後端的數據。實現的方式是:DOM 事件監聽。這兩個⽅向都實現的,咱們稱之爲數據的雙向綁定。前端
總結: 在MVVM的框架下視圖和模型是不能直接通訊的。 它們經過ViewModel來通訊,ViewModel一般要實現一個observer觀察者,當數據發⽣變化,ViewModel可以監聽到數據的這種變化,而後通知到對應的視圖作自動更新,而當用戶操做視圖,ViewModel也能監聽到視圖的變化,而後通知數據作改動,這實際上就實現了了數據的雙向綁定。而且MVVM中的View 和 ViewModel能夠互相通訊 {% img [class names] /img/MVVM.png [width] [height] [title text [alt text]] %}vue
MVC是Model-View- Controller的簡寫。即模型-視圖-控制器。M和V指的意思和MVVM中的M和V意思⼀樣。C即Controller指的是頁⾯業務邏輯。使⽤用MVC的目的就是將M和V的代碼分離。‘MVC是單向通訊。也就是View跟Model,必須經過Controller來承上啓下。java
MVC和MVVM的區別並不是VM徹底取代了Creact
ViewModel存在目的在於抽離Controller中展現的業務邏輯,而不是替代Controller,其它視圖操做業務等仍是應該放在Controller中實現。也就是說MVVM實現的是業務邏輯組件的重⽤。因爲mvc出現的時間比較早,前端並不那麼成熟,不少業務邏輯也是在後端實現,因此前端並無真正意義上的MVC模式。而咱們今天再次提起MVC,是由於大前端的來到,出現了了MVVM模式的框架,咱們須要瞭解一下MVVM這種設計模式是如何一步步演變過來的。jquery
(咱們用庫,可是框架用咱們,必須按它的規則作)總結下來,一種兩點,維護和使用方便、實現對業務的分紅在過去的10年年中,咱們已經把不少傳統的服務端代碼放到了瀏覽器器中,這樣就產⽣生了成千上萬行的javascript代碼,它們鏈接了各式各樣的HTML 和CSS⽂件,但缺少正規的組織形式,這也就是爲何愈來愈多的開發者使用javascript框架。好比:angular、react、vue。瀏覽器的兼容性問題已經不再是前端的阻礙。前端的項⽬愈來愈大,項⽬的可維護性和擴展性、安全性等成了主要問題。當年爲了解決瀏覽器器兼容性問題,出現了不少類庫,其中最典型的就是jquery。可是這類庫沒有實現對業務邏輯的分紅,因此維護性和擴展性極差。綜上兩方⾯面緣由,纔有了了MVVM模式一類框架的出現。好比vue,經過數據的雙向綁定,極⼤提升了開發效率。webpack
Vue就是基於MVVM模式實現的一套框架, 在vue中: Model:指的是js中的數據,如對象,數組等等。 View:指的是頁面視圖 viewModel:指的是vue實例例化對象web
(1) 若是你已經有⼀個現成的服務端應⽤用,你能夠將vue 做爲該應⽤的⼀部分嵌入其中,帶來更加豐富的交互體驗;vuex
(2) 若是你但願將更多業務邏輯放到前端來實現,那麼VUE的核⼼庫及其⽣態系統也能夠滿⾜你的各式需求(core+vuex+vue-route)。和其它前端框架同樣,VUE容許你將一個⽹⻚分割成可復⽤的組件,每一個組件都包含屬於自⼰的HTML、CSS、JAVASCRIPT以⽤來渲染網頁中相應的地⽅。後端
(3) 若是咱們構建⼀個大型的應⽤,在這一點上,咱們可能須要將東⻄分割成爲各自的組件和文件,vue有⼀個命令⾏工具,使快速初始化一個真實的工程變得很是簡單(vue init webpack my-project)。咱們可使用VUE的單文件組件,它包含了各自的HTML、JAVASCRIPT以及帶做⽤用域的CSS或SCSS。以上這三個例子,是一步步遞進的,也就是說對VUE的使用可大可小,它都會有相應的⽅方式來整合到你的項目中。因此說它是一個漸進式的框架。
響應式的(reactive),也就是說當咱們的數據變動時,VUE會幫你更新全部網頁中⽤到它的地⽅
一、 髒值檢查:angular.js 是經過髒值檢測的方式⽐對數據是否有變更,來決定是否更新視圖,最簡單的方式就是經過 setInterval() 定時輪詢檢測數據變更,固然Google不會這麼low.angular只有在指定的事件觸發時進⼊入髒值檢測,大體以下:DOM事件,譬如⽤用戶輸⼊文本,點擊按鈕等。( ng-click ) XHR響應事件 ( location ) Timer事件(interval ) 執行 apply()在 Angular 中組件是以樹的形式組織起來的。相應地,檢測器也是⼀棵樹的形狀。當⼀個異步事件發⽣時,髒檢查會從根組件開始,自上而下對樹上的全部⼦組件進行檢查,這種檢查⽅式的性能存在很大問題。
二、觀察者-訂閱者(數據劫持):vueObserver 數據監聽器器,把一個普通的 JavaScript 對象傳給Vue 實例的 data 選項,Vue 將遍歷此對象全部的屬性,並使用Object.defineProperty()方法把這些屬性所有轉成setter、getter⽅方法。當data中的某個屬性被訪問時,則會調用getter方法,當data中的屬性被改變時,則會調用setter⽅方法。Compile指令解析器器,它的做⽤對每一個元素節點的指令進⾏解析,替換模板數據,並綁定對應的更新函數,初始化相應的訂閱。Watcher 訂閱者,做爲鏈接Observer 和Compile 的橋樑,可以訂閱並收到每一個屬性變更的通知,執⾏指令綁定的相應回調函數。Dep 消息訂閱器器,內部維護了一個數組,用來收集訂閱者(Watcher),數據變更觸發notify函數,再調用訂閱者的 update ⽅方法。