一、MVC、MVP、MVVC
復雜的軟件必須有清晰合理的架構，否則無法開發和維護。為了將業務和視圖的實現代碼分離，目前比較流行三種前端架構：
MVC = Model-View-Controller
MVP = Model-View-Presenter
MVVM = Model-View-ViewModel
Model 為模型層，主要管理業務模型的數據和行為；
View 為展示層，其職責就是管理用戶界面。
三個架構模式目的都是為了解耦 Model 和 View，主要不同點就在於三者實現解耦的方案不同。
二、MVC
MVC = Model-View-Controller，
- 視圖（View）：用戶界面。
- 控制器（Controller）：業務邏輯
- 模型（Model）：數據保存
各部分之間的通信方式如下
View會接收用戶的交互請求並展示數據信息給用戶。在 MVC 里，View 被設計為可嵌套的，使用了組合(Composite)模式來實現。比如，列表視圖(ListView)或表格視圖(TableView)由每個 Item 組成，每個 Item 又可以由圖片、文本、按鈕等組成。View 是傾向於可復用的，因此，在實際應用中，傾向於將 View 開發成相對通用的組件。
Controller 層主要擔任 Model 與 View 之間的橋梁，用於控制程序的流程。Controller 負責確保 View 可以訪問到需要顯示的 Model 對象數據，並充當 View 了解 Model 更改的渠道。View 接收到用戶的交互請求之后，會將請求轉發給 Controller，Controller 解析用戶的請求之后，數據就會交給對應的 Model。
Model在前端框架中就是數據的存儲。在傳統后端開發中習慣把業務層歸入Model，而對前端框架來說，通常不這樣划分。
三、MVP
MVP 模式將 Controller 改名為 Presenter，同時改變了通信方向。
MVP有以下三個特點：
1. 各部分之間的通信，都是雙向的。
2. View 與 Model 不發生聯系，都通過 Presenter 傳遞。
3. View 非常薄，不部署任何業務邏輯，稱為"被動視圖"（Passive View），即沒有任何主動性，而 Presenter非常厚，所有邏輯都部署在那里。
四、MVVM
MVVM 模式將 Presenter 改名為 ViewModel，MVP 很相似，最大的不同在於 View 和 ViewModel 之間主要是通過數據綁定的方案來實現交互的。
MVVM采用雙向綁定（data-binding）：View的變動，自動反映在 ViewModel，反之亦然。AngularJS 和 Vue 都采用這種模式，而React采用了單向數據流，屬於MVP架構。
要實現數據綁定，通常都采用發布者-訂閱者模式進行實現，但這部分工作如果由開發人員自己來寫代碼實現，其實還是挺復雜的，因此，各大平台都提供了各自的內部實現。比如 Vue 和 AngularJS 自身都實現了數據綁定，Android 目前最主流的方案就是采用 Jetpack，iOS 最常用的方案則是結合 ReactiveCocoa（RAC）實現。
MVP 和 MVVM 都是為了解決界面和數據的分離問題，兩者只是采用了不同的實現方案。MVP 之間的交互主要是通過接口實現的，其主要弊端就是需要編寫大量接口。而 MVVM 則是通過數據綁定的方式實現交互，雖然其實現需要依賴具體的一些框架工具，但明顯大大減少了開發者需要編寫的代碼量。