MVC、MVP添寺、MVVM

• MVC 模式： 從大鍋燴時代進化胯盯，引入了分層的概念，但是層與層之間耦合明顯计露，維護起來不容易博脑；
• MVP 模式： 在 MVC 基礎上進一步解耦，視圖層和模型層完全隔離票罐，交互只能通過管理層來進行叉趣，問題是更新視圖需要管理層手動來進行；
• MVVM 模式： 引入雙向綁定機制该押，幫助實現(xiàn)一些更新視圖層和模型層的工作君账，讓開發(fā)者可以更專注于業(yè)務邏輯，相比于之前的模式沈善，可以使用更少的代碼量完成更復雜的交互乡数； MVC、MVP闻牡、MVVM 模式是我們經(jīng)常遇到的概念净赴，其中 MVVM 是最常用到的，在實際項目中往往沒有嚴格按照模式的定義來設計的系統(tǒng)罩润，開發(fā)中也不一定要糾結自己用的到底是哪個模式玖翅，合適的才是最好的。

1. MVC （Model View Controller）

MVC 模式將程序分為三個部分：模型（Model）割以、視圖（View）金度、控制器（Controller）。

• Model 模型層： 業(yè)務數(shù)據(jù)的處理和存儲严沥，數(shù)據(jù)更新后更新猜极；
• View 視圖層： 人機交互接口，一般為展示給用戶的界面消玄；
• Controller 控制器層 ： 負責連接 Model 層和 View 層跟伏，接受并處理 View 層觸發(fā)的事件，并在 Model 層的數(shù)據(jù)狀態(tài)變動時更新 View 層翩瓜；
• MVC 模式的目的是通過引入 Controller 層來將 Model 層和 View 層分離受扳，分層的引入是原來大鍋燴方式的改進，使得系統(tǒng)在可維護性和可讀性上有了進步兔跌。
• MVC 模式提出已經(jīng)有四十余年勘高，MVC 模式在各個書、各個教程、WIKI 的解釋有各種版本华望，甚至 MVC 模式在不同系統(tǒng)中的具體表現(xiàn)也不同层亿，這里只介紹典型 MVC 模式的思路。

典型思路是 View 層通過事件通知到 Controller 層立美，Controller 層經(jīng)過對事件的處理完成相關業(yè)務邏輯匿又，要求 Model 層改變數(shù)據(jù)狀態(tài)，Model 層再將新數(shù)據(jù)更新到 View層建蹄。示意圖如下：

image

在實際操作時碌更，用戶可以直接對 View 層的 UI 進行操作，以通過事件通知 Controller 層洞慎，經(jīng)過處理后修改 Model 層的數(shù)據(jù)痛单，Model 層使用最新數(shù)據(jù)更新 View。示意圖如下：

image

用戶也可以直接觸發(fā) Controller 去更新 Model 層狀態(tài)劲腿，再更新 View 層：

image

某些場景下旭绒，View 層直接采用觀察者/發(fā)布訂閱模式監(jiān)聽 Model 層的變化，這樣 View層和 Model 層相互持有焦人、相互操作挥吵，導致緊密耦合，在可維護性上有待提升花椭。由此忽匈，MVP 模式應運而生 。

2. MVP （Model View Presenter）

MVP 模式將程序分為三個部分：模型（Model）矿辽、視圖（View）丹允、管理層（Presenter）。

• Model 模型層： 只負責存儲數(shù)據(jù)袋倔，與 View 呈現(xiàn)無關雕蔽，也與 UI 處理邏輯無關，發(fā)生更新也不用主動通知 View宾娜；
• View 視圖層： 人機交互接口批狐，一般為展示給用戶的界面；
• Presenter 管理層 ： 負責連接 Model 層和 View 層碳默，處理 View 層的事件贾陷，負責獲取數(shù)據(jù)并將獲取的數(shù)據(jù)經(jīng)過處理后更新 View；
• MVC 模式的 View 層和 Model 層存在耦合嘱根，為了解決這個問題，MVP 模式將 View 層和 Model 層解耦巷懈，之間的交互只能通過 Presenter 層该抒，實際上，MVP 模式的目的就是將 View 層和 Model 層完全解耦顶燕，使得對 View 層的修改不會影響到 Model 層凑保，而對 Model 層的數(shù)據(jù)改動也不會影響到View 層冈爹。

典型流程是 View 層觸發(fā)的事件傳遞到 Presenter 層中處理，Presenter 層去操作 Model 層欧引，并且將數(shù)據(jù)返回給 View層频伤，這個過程中，View 層和 Model 層沒有直接聯(lián)系芝此。而 View 層不部署業(yè)務邏輯憋肖，除了展示數(shù)據(jù)和觸發(fā)事件之外，其它時間都在等著 Presenter 層來更新自己婚苹，被稱為「被動視圖」岸更。

示意圖如下：

image

在實際操作時，用戶可以直接對 View 層的 UI 進行操作膊升，View 層通知 Presenter 層怎炊，Presenter 層操作 Model 層的數(shù)據(jù)，Presenter 層獲取到數(shù)據(jù)之后更新 View廓译。示意圖如下：

image

• 由于 Presenter 層負責了數(shù)據(jù)獲取评肆、數(shù)據(jù)處理、交互邏輯非区、UI 效果等等功能糟港，所以 Presenter 層就變得強大起來低零，相應的终惑，Model 層只負責數(shù)據(jù)存儲，而 View 層只負責視圖廊散，Model 和 View 層的責任純粹而單一歹垫，如果我們需要添加或修改功能模塊剥汤，只需要修改 Presenter 層就夠了。由于 Presenter 層需要調(diào)用 View 層的方法更新視圖排惨，Presenter 層直接持有 View 層導致了 Presenter 對 View 的依賴吭敢。

正如上所說，更新視圖需要 Presenter 層直接持有 View 層暮芭，并通過調(diào)用 View 層中的方法來實現(xiàn)鹿驼，還是需要一系列復雜操作，有沒有什么機制自動去更新視圖而不用我們手動去更新呢辕宏，所以畜晰，MVVM 模式應運而生。

3. MVVM （Model View ViewModel）

MVVM 模式將程序分為三個部分：模型（Model）瑞筐、視圖（View）凄鼻、視圖模型（View-Model）。

和 MVP 模式類似，Model 層和 View 層也被隔離開块蚌，徹底解耦闰非，ViewModel 層相當于 Presenter 層，負責綁定 Model 層和 View 層峭范，相比于 MVP 增加了雙向綁定機制财松。

結構圖如下：

image

MVVM 模式的特征是 ViewModel 層和 View 層采用雙向綁定的形式（Binding），View 層的變動纱控，將自動反映在 ViewModel 層辆毡，反之亦然。

• 但是雙向綁定給調(diào)試和錯誤定位帶來困難其徙，View 層的異撑咂龋可能是 View 的代碼有問題，也有可能是 Model 層的問題唾那。數(shù)據(jù)綁定使得一個位置的 Bug 被傳遞到別的位置访锻，要定位原始出問題的地方就變得不那么容易了。
• 對簡單UI 來說闹获，實現(xiàn) MVVM 模式的開銷是不必要的期犬，而對于大型應用來說，引入 MVVM 模式則會節(jié)約大量手動更新視圖的復雜過程避诽，是否使用龟虎，還是看使用場景。
• Vue 的雙向綁定機制應該算是比較有 MVVM 模式的影子沙庐，但 Vue 文檔 里面是這么描述：

image

這是為什么呢鲤妥，因為 MVVM 模式要求 Model 層和 View 層完全解耦，但是由于 Vue 還提供了 ref 這樣的 API拱雏，使得 Model 也可以直接持有 View：

image

但是大多數(shù)帖子都說直接稱呼 Vue 為 MVVM 框架棉安，可見這些模式的劃分也不是那么嚴格。