MVC
MVC的思想：一句話描述就是Controller負責將Model的數據用View顯示出來，換句話說就是在Controller里面把Model的數據賦值給View，比如在controller中寫document.getElementById("box").innerhtml = data[”title”]，只是還沒有刻意建一個Model類出來而已。
M：Model（模型）：是應用程序中用於處理應用程序數據邏輯的部分。通常模型對象負責在數據庫中存取數據。
V：View（視圖）：是應用程序中處理數據顯示的部分。通常視圖是依據模型數據創建的。
C：Controller（控制器）：是應用程序中處理用戶交互的部分。通常控制器負責從視圖讀取數據，控制用戶輸入，並向模型發送數據。Controller被設計出來：1、管理自己的生命周期；2、處理Controller之間的跳轉；3、實現Controller容器。
MVC標准如圖：
廣州品牌設計公司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層顯示會自動改變。