淺談MVC、MVVM的區別

一.概述

MVC,MVP,MVVM是三種常見的前端架構模式(Architectural Pattern),它通過分離關注點來改進代碼組織方式。不同於設計模式(Design Pattern),只是為了解決一類問題而總結出的抽象方法，一種架構模式往往能使用多種設計模式。

    MVC模式是MVP,MVVM模式的基礎，這兩種模式更像是MVC模式的優化改良版,他們三個的MV即Model，view相同，不同的是MV之間的紐帶部分。本文主要介紹MVC與MVVM的應用與區別，因為MVP好像不是很常用。
 二.MVC

 簡介一下MVC：

 

 MVC允許在不改變視圖的情況下改變視圖對用戶輸入的響應方式，用戶對View的操作交給了Controller處理，在Controller中響應View的事件調用Model的接口對數據進行操作，一旦Model發生變化便通知相關視圖進行更新。

    如果前端沒有框架，只使用原生的html+js，MVC模式可以這樣理解。將html看成view;js看成controller，負責處理用戶與應用的交互，響應對view的操作（對事件的監聽），調用Model對數據進行操作，完成model與view的同步（根據model的改變，通過選擇器對view進行操作）;將js的ajax當做Model，也就是數據層，通過ajax從服務器獲取數據。
 

三.MVVM

MVVM與MVC最大的區別就是：它實現了View和Model的自動同步，也就是當Model的屬性改變時，我們不用再自己手動操作Dom元素，來改變View的顯示，而是改變屬性后該屬性對應View層顯示會自動改變。非常的神奇~

這里我們拿典型的MVVM模式的代表，Vue，來舉例

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆轉消息</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

這里的html部分相當於View層，可以看到這里的View通過通過模板語法來聲明式的將數據渲染進DOM元素，當ViewModel對Model進行更新時，通過數據綁定更新到View。

    Vue實例中的data相當於Model層，而ViewModel層的核心是Vue中的雙向數據綁定，即Model變化時VIew可以實時更新，View變化也能讓Model發生變化。

    整體看來，MVVM比MVC精簡很多，不僅簡化了業務與界面的依賴，還解決了數據頻繁更新的問題，不用再用選擇器操作DOM元素。因為在MVVM中，View不知道Model的存在，Model和ViewModel也觀察不到View，這種低耦合模式提高代碼的可重用性。

    四.總結

    在學習MVC與MVVM架構模式的過程中，經常會對分層的界限叫不准。比如說不清楚js里到底哪里算Model，哪里算Controller，Vue實例里面Model與ViewModel的嚴格界限在哪，有時候越想越感覺叫不准。當我從頭到尾整理完這兩種模式特點的時候，發現這個界限沒有那么重要。我覺得重要的是，理解兩種模式的基本思想，根據應用需求，選擇適合自己業務的框架。