在下文中，如果某些內容和你看的某本書或者某個帖子上的不一樣，不要驚慌，多看幾本書，多打開幾個帖子，你會發現每個都不一樣，所以模式具體是如何表現並不重要，重要的是，瞭解這三個模式主要的目的和思想是什麼：
1. MVC 模式：從大鍋燴時代進化，引入了分層的概念，但是層與層之間耦合明顯，維護起來不容易；
2. MVP 模式：在 MVC 基礎上進一步解耦，視圖層和模型層完全隔離，交互只能通過管理層來進行，問題是更新視圖需要管理層手動來進行；
3. MVVM 模式：引入雙向綁定機制，幫助實現一些更新視圖層和模型層的工作，讓開發者可以更專注於業務邏輯，相比於之前的模式，可以使用更少的代碼量完成更復雜的交互；
MVC、MVP、MVVM 模式是我們經常遇到的概念，其中 MVVM 是最常用到的，在實際項目中往往沒有嚴格按照模式的定義來設計的系統，開發中也不一定要糾結自己用的到底是哪個模式，合適的纔是最好的。
1. MVC （Model View Controller）
MVC 模式將程序分爲三個部分：模型（Model）、視圖（View）、控制器（Controller）。
1. Model 模型層：業務數據的處理和存儲，數據更新後更新；
2. View 視圖層：人機交互接口，一般爲展示給用戶的界面；
3. Controller 控制器層 ：負責連接 Model 層和 View 層，接受並處理 View 層觸發的事件，並在 Model 層的數據狀態變動時更新 View 層；
MVC 模式的目的是通過引入 Controller 層來將 Model 層和 View 層分離，分層的引入是原來大鍋燴方式的改進，使得系統在可維護性和可讀性上有了進步。
MVC 模式提出已經有四十餘年，MVC 模式在各個書、各個教程、WIKI 的解釋有各種版本，甚至 MVC 模式在不同系統中的具體表現也不同，這裏只介紹典型 MVC 模式的思路。
典型思路是 View 層通過事件通知到 Controller 層，Controller 層經過對事件的處理完成相關業務邏輯，要求 Model 層改變數據狀態，Model 層再將新數據更新到 View 層。示意圖如下：
在實際操作時，用戶可以直接對 View 層的 UI 進行操作，以通過事件通知 Controller 層，經過處理後修改 Model 層的數據，Model 層使用最新數據更新 View。示意圖如下：
用戶也可以直接觸發 Controller 去更新 Model 層狀態，再更新 View 層：
某些場景下，View 層直接採用觀察者/發佈訂閱模式監聽 Model 層的變化，這樣 View 層和 Model 層相互持有、相互操作，導致緊密耦合，在可維護性上有待提升。由此，MVP 模式應運而生 。
2. MVP （Model View Presenter）
MVP 模式將程序分爲三個部分：模型（Model）、視圖（View）、管理層（Presenter）。
1. Model 模型層：只負責存儲數據，與 View 呈現無關，也與 UI 處理邏輯無關，發生更新也不用主動通知 View；
2. View 視圖層：人機交互接口，一般爲展示給用戶的界面；
3. Presenter 管理層 ：負責連接 Model 層和 View 層，處理 View 層的事件，負責獲取數據並將獲取的數據經過處理後更新 View；
MVC 模式的 View 層和 Model 層存在耦合，爲了解決這個問題，MVP 模式將 View 層和 Model 層解耦，之間的交互只能通過 Presenter 層，實際上，MVP 模式的目的就是將 View 層和 Model 層完全解耦，使得對 View 層的修改不會影響到 Model 層，而對 Model 層的數據改動也不會影響到 View 層。
典型流程是 View 層觸發的事件傳遞到 Presenter 層中處理，Presenter 層去操作 Model 層，並且將數據返回給 View 層，這個過程中，View 層和 Model 層沒有直接聯繫。而 View 層不部署業務邏輯，除了展示數據和觸發事件之外，其它時間都在等着 Presenter 層來更新自己，被稱爲「被動視圖」。
示意圖如下：
在實際操作時，用戶可以直接對 View 層的 UI 進行操作，View 層通知 Presenter 層，Presenter 層操作 Model 層的數據，Presenter 層獲取到數據之後更新 View。示意圖如下：
由於 Presenter 層負責了數據獲取、數據處理、交互邏輯、UI 效果等等功能，所以 Presenter 層就變得強大起來，相應的，Model 層只負責數據存儲，而 View 層只負責視圖，Model 和 View 層的責任純粹而單一，如果我們需要添加或修改功能模塊，只需要修改 Presenter 層就夠了。由於 Presenter 層需要調用 View 層的方法更新視圖，Presenter 層直接持有 View 層導致了 Presenter 對 View 的依賴。
正如上所說，更新視圖需要 Presenter 層直接持有 View 層，並通過調用 View 層中的方法來實現，還是需要一系列複雜操作，有沒有什麼機制自動去更新視圖而不用我們手動去更新呢，所以，MVVM 模式應運而生。
3. MVVM （Model View ViewModel）
MVVM 模式將程序分爲三個部分：模型（Model）、視圖（View）、視圖模型（View-Model）。
和 MVP 模式類似，Model 層和 View 層也被隔離開，徹底解耦，ViewModel 層相當於 Presenter 層，負責綁定 Model 層和 View 層，相比於 MVP 增加了雙向綁定機制。
結構圖如下：
MVVM 模式的特徵是 ViewModel 層和 View 層採用雙向綁定的形式（Binding），View 層的變動，將自動反映在 ViewModel 層，反之亦然。
但是雙向綁定給調試和錯誤定位帶來困難，View 層的異常可能是 View 的代碼有問題，也有可能是 Model 層的問題。數據綁定使得一個位置的 Bug 被傳遞到別的位置，要定位原始出問題的地方就變得不那麼容易了。
對簡單 UI 來說，實現 MVVM 模式的開銷是不必要的，而對於大型應用來說，引入 MVVM 模式則會節約大量手動更新視圖的複雜過程，是否使用，還是看使用場景。
Vue 的雙向綁定機制應該算是比較有 MVVM 模式的影子，但 Vue 文檔 裏面是這麼描述：
這是爲什麼呢，因爲 MVVM 模式要求 Model 層和 View 層完全解耦，但是由於 Vue 還提供了 ref 這樣的 API，使得 Model 也可以直接持有 View：
但是大多數帖子都說直接稱呼 Vue 爲 MVVM 框架，可見這些模式的劃分也不是那麼嚴格。
參考文獻：
2. MVVM - 廖雪峯