原文地址：https://segmentfault.com/a/1190000021818631
MVC、MVVM、MVP是常見(jiàn)的設(shè)計(jì)模式，也是常見(jiàn)的設(shè)計(jì)思想，那它們之間有什么區(qū)別呢？接下來(lái)對(duì)它們進(jìn)行簡(jiǎn)要的歸納總結(jié)

三種模式的介紹

1.MVC：經(jīng)典設(shè)計(jì)模式

MVC全名為Model View Controller ，是模型（Model）- 視圖（View）- 控制器（Controller）的縮寫(xiě)。他是1970年代被引入到軟件設(shè)計(jì)大眾的。MVC模式致力于關(guān)注點(diǎn)的切分，這意味著model和controller的邏輯是不與用戶(hù)界面（View）掛鉤的。因此，維護(hù)和測(cè)試程序變得更加簡(jiǎn)單容易。
[圖片上傳失敗...(image-98e8bd-1630660921001)]

• Model層：模型（用于封裝業(yè)務(wù)邏輯相關(guān)的數(shù)據(jù)以及對(duì)數(shù)據(jù)的操縱）
• View層：視圖（渲染圖形化界面，也就是所謂的UI界面）
• Controller層：控制器（M和V之間的連接器，主要處理業(yè)務(wù)邏輯，包括顯示數(shù)據(jù)，界面跳轉(zhuǎn)，管理頁(yè)面生命周期等）

**標(biāo)準(zhǔn)MVC工作模式： **當(dāng)有用戶(hù)的行為觸發(fā)操作時(shí)，控制器（Controller）更新模型，并通知視圖（V）和模型（M）更新，這時(shí)視圖（V）就會(huì)向模型（M）請(qǐng)求新的數(shù)據(jù)，這就是標(biāo)準(zhǔn)MVC模式下Model，View 和 Controller 之間的協(xié)作方式。

MVC優(yōu)點(diǎn)：

1. 耦合性低，視圖層和業(yè)務(wù)層分離，這樣就允許更改視圖層代碼而不用重新編譯模型和控制器代碼；
2. 重用性高；
3. 生命周期成本低；
4. MVC使開(kāi)發(fā)和維護(hù)用戶(hù)接口的技術(shù)含量降低；
5. 可維護(hù)性高，分離視圖層和業(yè)務(wù)邏輯層也使得WEB應(yīng)用更易于維護(hù)和修改；
6. 部署快。

MVC缺點(diǎn)：

1. 不適合小型，中等規(guī)模的應(yīng)用程序，花費(fèi)大量時(shí)間將MVC應(yīng)用到規(guī)模并不是很大的應(yīng)用程序通常會(huì)得不償失。
2. 視圖與控制器間過(guò)于緊密連接，視圖與控制器是相互分離，但卻是聯(lián)系緊密的部件，視圖沒(méi)有控制器的存在，其應(yīng)用是很有限的，反之亦然，這樣就妨礙了他們的獨(dú)立重用。
3. 視圖對(duì)模型數(shù)據(jù)的低效率訪(fǎng)問(wèn)，依據(jù)模型操作接口的不同，視圖可能需要多次調(diào)用才能獲得足夠的顯示數(shù)據(jù)。對(duì)未變化數(shù)據(jù)的不必要的頻繁訪(fǎng)問(wèn)，也將損害操作性能。

2.MVP:MVP 模式將 Controller 改名為 Presenter，同時(shí)改變了通信方向。

MVP全名為Model View Presenter ，是由MVC演變而來(lái)，它和MVC的相同之處在于：Controller / Presente都是負(fù)責(zé)業(yè)務(wù)邏輯，Model管理數(shù)據(jù)，View負(fù)責(zé)顯示。不過(guò)在MVP中View并不直接與Model交互，它們之間的通信是通過(guò)Presenter (MVC中的Controller)來(lái)進(jìn)行的，即使用 Presenter 對(duì)視圖和模型進(jìn)行了解耦，讓它們彼此都對(duì)對(duì)方一無(wú)所知，溝通都通過(guò) Presenter 進(jìn)行。
[圖片上傳失敗...(image-ef95e0-1630660921001)]

• Model層：模型（用于封裝業(yè)務(wù)邏輯相關(guān)的數(shù)據(jù)以及對(duì)數(shù)據(jù)的操縱）
• View層：視圖（渲染圖形化界面，也就是所謂的UI界面）
• Presenter層：控制器（M和V之間的連接器，主要處理業(yè)務(wù)邏輯，包括顯示數(shù)據(jù)，界面跳轉(zhuǎn)，管理頁(yè)面生命周期等）

**標(biāo)準(zhǔn)MVP工作模式: **在 MVP 中，Presenter 可以理解為松散的控制器，其中包含了視圖的 UI 業(yè)務(wù)邏輯，所有從視圖發(fā)出的事件，都會(huì)通過(guò)代理給 Presenter 進(jìn)行處理；同時(shí)，Presenter 也通過(guò)視圖暴露的接口與其進(jìn)行通信。

MVP特點(diǎn)：

1. M、V、P之間雙向通信。
2. View 與 Model 不通信，都通過(guò) Presenter 傳遞。Presenter完全把Model和View進(jìn)行了分離，主要的程序邏輯在Presenter里實(shí)現(xiàn)。
3. View 非常薄，不部署任何業(yè)務(wù)邏輯，稱(chēng)為”被動(dòng)視圖”（Passive View），即沒(méi)有任何主動(dòng)性，而 Presenter非常厚，所有邏輯都部署在那里。
4. Presenter與具體的View是沒(méi)有直接關(guān)聯(lián)的，而是通過(guò)定義好的接口進(jìn)行交互，從而使得在變更View時(shí)候可以保持Presenter的不變，這樣就可以重用。不僅如此，還可以編寫(xiě)測(cè)試用的View，模擬用戶(hù)的各種操作，從而實(shí)現(xiàn)對(duì)Presenter的測(cè)試–從而不需要使用自動(dòng)化的測(cè)試工具。

MVP優(yōu)點(diǎn)：

1. 模型與視圖完全分離，我們可以修改視圖而不影響模型；
2. 可以更高效地使用模型，因?yàn)樗械慕换ザ及l(fā)生在一個(gè)地方——Presenter內(nèi)部；
3. 我們可以將一個(gè)Presenter用于多個(gè)視圖，而不需要改變Presenter的邏輯。這個(gè)特性非常的有用，因?yàn)橐晥D的變化總是比模型的變化頻繁；
4. 如果我們把邏輯放在Presenter中，那么我們就可以脫離用戶(hù)接口來(lái)測(cè)試這些邏輯（單元測(cè)試）。

MVP缺點(diǎn)：視圖和Presenter的交互會(huì)過(guò)于頻繁，使得他們的聯(lián)系過(guò)于緊密。也就是說(shuō)，一旦視圖變更了，presenter也要變更。

3.MVVM

MVVM全名為Model View ViewModel。這個(gè)模式提供對(duì)View和View Model的雙向數(shù)據(jù)綁定。這使得View Model的狀態(tài)改變可以自動(dòng)傳遞給View。典型的情況是，View Model通過(guò)使用obsever模式（觀(guān)察者模式）來(lái)將View Model的變化通知給model。
[圖片上傳失敗...(image-dc3ca7-1630660921001)]

• Model層：Model層代表了描述業(yè)務(wù)邏輯和數(shù)據(jù)的一系列類(lèi)的集合。它也定義了數(shù)據(jù)修改和操作的業(yè)務(wù)規(guī)則。
• View層：View代表了UI組件，像CSS，JQuery，html等。他只負(fù)責(zé)展示從Presenter接收到的數(shù)據(jù)。也就是把模型轉(zhuǎn)化成UI。
• View Model層：View Model負(fù)責(zé)暴漏方法，命令，其他屬性來(lái)操作VIew的狀態(tài)，組裝model作為View動(dòng)作的結(jié)果，并且觸發(fā)view自己的事件。

MVVM模式關(guān)鍵點(diǎn)：

1. 用戶(hù)和View交互。
2. View和ViewModel是多對(duì)一關(guān)系。意味著一個(gè)ViewModel只映射多個(gè)View。
3. View持有ViewModel的引用，但是ViewModel沒(méi)有任何View的信息。
4. View 和ViewModel之間有雙向數(shù)據(jù)綁定關(guān)系。

MVVM優(yōu)點(diǎn)：

1. 低耦合，視圖（View）可以獨(dú)立于Model變化和修改，一個(gè)ViewModel可以綁定到不同的”View”上，當(dāng)View變化的時(shí)候Model可以不變，當(dāng)Model變化的時(shí)候View也可以不變。
2. 可重用性，可以把一些視圖邏輯放在一個(gè)ViewModel里面，讓很多view重用這段視圖邏輯。
3. 獨(dú)立開(kāi)發(fā)，開(kāi)發(fā)人員可以專(zhuān)注于業(yè)務(wù)邏輯和數(shù)據(jù)的開(kāi)發(fā)（ViewModel），設(shè)計(jì)人員可以專(zhuān)注于頁(yè)面設(shè)計(jì)，使用Expression Blend可以很容易設(shè)計(jì)界面并生成xml代碼。
4. 可測(cè)試，界面向來(lái)是比較難于測(cè)試的，而現(xiàn)在測(cè)試可以針對(duì)ViewModel來(lái)寫(xiě)。

三種模式的區(qū)別

MVC 是世界上最低級(jí)、最原始的 UI 模式；MVC 就是在 V 上綁定 M，然后 C 負(fù)責(zé)處理界面整個(gè)提交請(qǐng)求，并且一遍遍地刷新整個(gè) V。這種機(jī)制。所以 MVC 的標(biāo)志是“初級(jí)、單向綁定、一遍遍刷新UI”。

MVP 則是深入到程序的“骨髓”，UI設(shè)計(jì)模板與 MVP 事件定義綁定，讓程序員可以捕獲這么一個(gè)組件的豐富的事件，然后在事件處理過(guò)程中又去從控件樹(shù)上去直接訪(fǎng)問(wèn)其它所有控件，直接修改其屬性。開(kāi)發(fā)的精力很大程度上用在學(xué)習(xí)各種控件的內(nèi)部機(jī)制上，學(xué)習(xí)曲線(xiàn)陡峭。所以MVP的標(biāo)志是“復(fù)雜、事件驅(qū)動(dòng)、精細(xì)到每一個(gè)控件層次”。

MVVM 則是在 MVP 上的改進(jìn)，它隔離了控件操作層，UI 模板上各種控件直接跟 VM 層的屬性綁定，使得 VM 屬性改變時(shí)自動(dòng)更新 UI 控件，反之 UI 控件的值改變時(shí)又自動(dòng)更新 VM 屬性。這樣編程的方式就不是去一大堆控件事件處理，而是寫(xiě)少量的 VM 屬性更改行為代碼。開(kāi)發(fā)精力絕大部分都放在業(yè)務(wù)與UI的綁定上，而并不需要研究控件內(nèi)部機(jī)制。

三種設(shè)計(jì)模式的應(yīng)用

1.MVC模式。

React使用的是MVC模式。所有MVC框架都是單向數(shù)據(jù)流的。
特色：

• 使用Virtual DOM
• 提供了響應(yīng)式(Reactive) 和組件化 (Composable) 的視圖組件。
• 將注意力集中保持在核心庫(kù)，而將其他功能如路由和全局狀態(tài)管理交給相關(guān)的庫(kù)。

注：react 實(shí)際上是一個(gè)“偽MVC”，它其實(shí)是 MVP 的，但是它深知 MVP 模式的弊病，它明明是基于組件并且綁定了組件的 change 事件的，但是它有使用虛擬DOM的方式來(lái)一遍遍刷新UI控件（并且為了解決性能問(wèn)題，有各種負(fù)責(zé)和詭異的避免全局刷新UI樹(shù)的反模式操作）。所以雖然 React 自稱(chēng)為 MVC模式，但是實(shí)際上它是 MVP 的變種。

2.MVP模式。

JQuery 是非常經(jīng)典的 MVP 編程模式

3.MVVM模式。

Knockout、AngularJS、Vue 等可以看作是 MVVM 模式

Angular使用的MVVM模式。當(dāng)觸發(fā)UI事件，ajax請(qǐng)求或者 timeout 延遲，會(huì)觸發(fā)臟檢查。這時(shí)會(huì)調(diào)用watch函數(shù)，最后把所有的變化全部更新，調(diào)用apply()方法把新的數(shù)據(jù)渲染到頁(yè)面上。
優(yōu)點(diǎn)：一次檢測(cè)會(huì)收集所有的數(shù)據(jù)變化，然后統(tǒng)一更新UI，大大減少了操作 DOM 的次數(shù)。
缺點(diǎn)：只要有ui或ajax或settimeout操作時(shí)就會(huì)進(jìn)行檢查，且當(dāng)watcher之間相互影響的時(shí)候，更會(huì)觸發(fā)多次$digest循環(huán)，這樣watcher一多，就會(huì)很影響性能。

注：AngularJS 其實(shí)在 MVVM 上做的不是很好，傾向于 MVP。只有 Knockout 是實(shí)現(xiàn)了經(jīng)典的 MVVM 設(shè)計(jì)模式，而且有幾個(gè)性能相關(guān)的特性（例如自動(dòng)延遲 UI 刷新、自動(dòng)抽稀無(wú)用的 UI 刷新操作）可以將性能提高（相對(duì)于其它許多 web 前端框架）至少幾十倍。

Vue一定意義上算是React和Angular的集大成者。它吸取了MVVM的數(shù)據(jù)管理思想，同時(shí)應(yīng)用了React的virtual Dom算法。它使用了雙向數(shù)據(jù)綁定來(lái)滿(mǎn)足開(kāi)發(fā)的便捷，但是它不同組件之間又使用單向數(shù)據(jù)流，來(lái)保證數(shù)據(jù)的可控性。它使用了很多Angular的指令語(yǔ)法，但是它革新了Angular的臟數(shù)據(jù)檢查機(jī)制，使用數(shù)據(jù)劫持的方法來(lái)觸法數(shù)據(jù)檢查機(jī)制。它借鑒了React的組件化思想，大大增加了前端工程的結(jié)構(gòu)規(guī)范化。

注：Vue 內(nèi)部使用了 Object.defineProperty() 來(lái)實(shí)現(xiàn)雙向綁定，通過(guò)這個(gè)函數(shù)可以監(jiān)聽(tīng)到 set 和 get 的事件。

總結(jié)

MVC 只是把控件跟 M 綁定，一遍遍刷新 UI。而 MVP 則是把控件跟事件單向綁定，它的假設(shè)是程序員最?lèi)?ài)寫(xiě)低級(jí)的代碼來(lái)操作控件。而 MVVM 則是把控件跟 VM 雙向綁定，它的假設(shè)是交互界面設(shè)計(jì)時(shí)最?lèi)?ài)寫(xiě)高層次一些的聲明來(lái)操作用戶(hù)業(yè)務(wù)行為上的變化。