Vue、MVVM、MVC、雙向綁定

1、MVVM雙向數據綁定

Mvvm定義MVVM是Model-View-ViewModel的簡寫。即模型-視圖-視圖模型。

【模型】指的是後端傳遞的數據。
【視圖】指的是所看到的⻚頁⾯面。
【視圖模型】mvvm模式的核⼼，它是鏈接view和model的橋樑梁。
它有兩個⽅方向： 一、是將【模型】轉化成【視圖】，即將後端傳遞的數據轉化成所看到的⻚面。實現的⽅方式是：數據綁定。
二、是將【視圖】轉化成【模型】，即將所看到的頁面轉化成後端的數據。實現的⽅方式是：DOM 事件監聽。這兩個⽅方向都實現的，咱們稱之爲數據的雙向綁定。

總結： 在MVVM的框架下視圖和模型是不能直接通訊的。 它們經過ViewModel來通訊，ViewModel一般要實現一個observer觀察者，

當數據發⽣生變化，ViewModel可以監聽到數據的這種變化， 而後通知到對應的視圖作自動更新， 而當用戶操做視圖，ViewModel也能監聽到視圖的變化， 而後通知數據作改動， 這實際上就實現了了數據的雙向綁定。 而且MVVM中的View 和 ViewModel能夠互相通訊

2、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這種設計模式是如何一步步演變過來的。

3、爲何出現MVVM框架？

（咱們用庫，可是框架用咱們，必須按它的規則作）

總結下來，一種兩點，維護和使用方便、實現對業務的分紅

在過去的10年年中，咱們已經把不少傳統的服務端代碼放到了瀏覽器器中，這樣就 產⽣生了成千上萬行的javascript代碼，它們鏈接了各式各樣的HTML 和CSS⽂件，但缺少正規的組織形式，這也就是爲何愈來愈多的開發者使用javascript框架。
好比：angular、react、vue。瀏覽器的兼容性問題已經不再是前端的阻礙。

前端的項⽬愈來愈大，項⽬的可維護性和擴展性、安全性等成了主要問題。 當年年爲了解決瀏覽器器兼容性問題，出現了不少類庫，其中最典型的就是jquery。 可是這類庫沒有實現對業務邏輯的分紅，因此維護性和擴展性極差。

綜上兩方⾯面緣由，纔有了了MVVM模式一類框架的出現。好比vue,經過數據的雙向綁定，極⼤提升了開發效率。

4、Vue

Vue就是基於MVVM模式實現的一套框架， 在vue中： Model：指的是js中的數據，如對象，數組等等。 View：指的是⻚頁⾯面視圖 viewModel：指的是vue實例例化對象

爲何說vue是漸進式框架，什麼是漸進式？

(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最獨特的特性

響應式的（reactive），也就是說當咱們的數據變動時，VUE會幫你更新全部網頁中⽤到它的地⽅

5、主流框架實現雙向綁定（響應式）的作法：

一、 髒值檢查： angular.js 是經過髒值檢測的方式⽐比對數據是否有變更，來決定是否更新視圖，最簡單的方式就是經過 setInterval() 定時輪詢檢測數據變更，固然Google不會這麼low.
angular只有在指定的事件觸發時進⼊入髒值檢測，大體以下： DOM事件，譬如⽤用戶輸⼊入⽂文本，點擊按鈕等。 ( ng-click ) XHR響應事件 ( $http ) 瀏覽器器Location變動更事件 ($location ) Timer事件($timeout , $interval ) 執行 $digest() 或 $apply()在 Angular 中組件是以樹的形式組織起來的。
相應地，檢測器器也是⼀一棵樹的形狀。當⼀一個異步事件發⽣生時，髒檢查會從根組件開始，自上而下對樹上的全部⼦組件進⾏行行檢查，這種檢查⽅方式的性能存在很⼤大問題。

二、觀察者-訂閱者（數據劫持）：

vueObserver 數據監聽器器，把⼀一個普通的 JavaScript 對象傳給Vue 實例的 data 選項， Vue 將遍歷此對象全部的屬性，並使用Object.defineProperty()方法把這些屬性所有轉成setter、getter⽅方法。當data中的某個屬性被訪問時，則會調用getter方法，
當data中的屬性被改變時，則會調用setter⽅方法。
Compile指令解析器器，它的做⽤對每一個元素節點的指令進⾏解析，替換模板數據，並綁定對應的更新函數，初始化相應的訂閱。
Watcher 訂閱者，做爲鏈接Observer 和Compile 的橋樑，可以訂閱並收到每一個屬性變更的通知，執⾏指令綁定的相應回調函數。
Dep 消息訂閱器器，內部維護了一個數組，用來收集訂閱者（Watcher），數據變更觸發notify函數，再調用訂閱者的 update ⽅方法

Object.defineProperties(data,{
   name:{
     set(val){
       //console.log(this==data);true
       for(let item of inputs){
         if(item.getAttribute("v-model")=="name"){
           item.value=val;
         }
       }
       cloneList.forEach((item,index)=>{
         nodeList[index].innerHTML=item.innerHTML.replace(/\{\{name}}/g,()=>val)
       })
     },
     get(){
        // do something
     }
   },
   age:{}
 });
複製代碼