MVC、MVP、MVVM
MVC
模式： 從大鍋燴時代進化，引入了分層的概念，但是層與層之間耦合明顯，維護起來不容易；
MVP
模式： 在 MVC 基礎上進一步解耦，檢視層和模型層完全隔離，互動只能透過管理層來進行，問題是更新檢視需要管理層手動來進行；
MVVM
模式： 引入雙向繫結機制，幫助實現一些更新檢視層和模型層的工作，讓開發者可以更專注於業務邏輯，相比於之前的模式，可以使用更少的程式碼量完成更復雜的互動； MVC、MVP、MVVM 模式是我們經常遇到的概念，其中 MVVM 是最常用到的，在實際專案中往往沒有嚴格按照模式的定義來設計的系統，開發中也不一定要糾結自己用的到底是哪個模式，合適的才是最好的。
MVC （Model View Controller）
MVC
模式將程式分為三個部分：模型（
Model
）、檢視（
View
）、控制器（
Controller
）。
Model
模型層： 業務資料的處理和儲存，資料更新後更新；
View
檢視層： 人機互動介面，一般為展示給使用者的介面；
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
）。
Model
模型層： 只負責儲存資料，與
View
呈現無關，也與
UI
處理邏輯無關，發生更新也不用主動通知
View
；
View
檢視層： 人機互動介面，一般為展示給使用者的介面；
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
框架，可見這些模式的劃分也不是那麼嚴格。
轉自簡書：Sky飛羽
原文連結：https：//www。jianshu。com/p/ad159a153c3c