Vue、MVVM、MVC、雙向繫結

小山芋發表於2018-07-08
VueMVVMMVC

一、MVVM雙向資料繫結

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

【模型】指的是後端傳遞的資料。
【檢視】指的是所看到的⻚頁⾯面。
【檢視模型】mvvm模式的核⼼，它是連線view和model的橋樑梁。
它有兩個⽅方向： 1、是將【模型】轉化成【檢視】，即將後端傳遞的資料轉化成所看到的⻚面。實現的⽅方式是：資料繫結。
2、是將【檢視】轉化成【模型】，即將所看到的頁面轉化成後端的資料。實現的⽅方式是：DOM 事件監聽。這兩個⽅方向都實現的，我們稱之為資料的雙向繫結。

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

當資料發⽣生變化，ViewModel能夠監聽到資料的這種變化， 然後通知到對應的檢視做自動更新， 而當使用者操作檢視，ViewModel也能監聽到檢視的變化， 然後通知資料做改動， 這實際上就實現了了資料的雙向繫結。 並且MVVM中的View 和 ViewModel可以互相通訊

Vue、MVVM、MVC、雙向繫結

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

三、為什麼出現MVVM框架？

（我們用庫，但是框架用我們，必須按它的規則做）

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

在過去的10年年中，我們已經把很多傳統的服務端程式碼放到了瀏覽器器中，這樣就 產⽣生了成千上萬行的javascript程式碼，它們連線了各式各樣的HTML 和CSS⽂件，但缺乏正規的組織形式，這也就是為什麼越來越多的開發者使用javascript框架。
比如：angular、react、vue。瀏覽器的相容性問題已經不再是前端的阻礙。

前端的項⽬越來越大，項⽬的可維護性和擴充套件性、安全性等成了主要問題。 當年年為了解決瀏覽器器相容性問題，出現了很多類庫，其中最典型的就是jquery。 但是這類庫沒有實現對業務邏輯的分成，所以維護性和擴充套件性極差。

綜上兩方⾯面原因，才有了了MVVM模式一類框架的出現。比如vue,通過資料的雙向繫結，極⼤提高了開發效率。

四、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會幫你更新所有網頁中⽤到它的地⽅

五、主流框架實現雙向繫結（響應式）的做法：

1、 髒值檢查： angular.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 ⽅方法

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:{}
 });
複製程式碼

相關文章