MVC

M：Model（模型）：是應用程式中用於處理應用程式資料邏輯的部分。通常模型物件負責在資料庫中存取資料。
V：View（檢視）：是應用程式中處理資料顯示的部分。通常檢視是依據模型資料建立的。
C：Controller（控制器）：是應用程式中處理使用者互動的部分。通常控制器負責從檢視讀取資料，控制使用者輸入，並向模型傳送資料。Controller被設計出來：1、管理自己的生命週期；2、處理Controller之間的跳轉；3、實現Controller容器。

廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com

MVVM

開發者為資料解析創建出了一個新的類：ViewModel。利用MVVM可以使我們的程式碼更加專注於處理業務邏輯而不是去關心DOM操作。

它有兩個方向：

一是將【模型】轉化成【檢視】，即將後端傳遞的資料轉化成所看到的頁面。實現的方式是：資料繫結。
二是將【檢視】轉化成【模型】，即將所看到的頁面轉化成後端的資料。實現的方式是：DOM 事件監聽。

這兩個方向都實現的，我們稱之為資料的雙向繫結。總結：在MVVM的框架下檢視和模型是不能直接通訊的。

vue就是基於MVVM模式實現的一套框架，在vue中：

Model:指的是js中的資料，如物件，陣列等等。
View:指的是頁面檢視
viewModel:指的是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，這種低耦合模式提高程式碼的可重用性。

MVVM與MVC最大的區別就是：

它實現了View和Model的自動同步，也就是當Model的屬性改變時，我們不用再自己手動操作Dom元素，來改變View的顯示，而是改變屬性後該屬性對應View層顯示會自動改變。