mvvm模式和mvc模式 概述總結對比

標籤：處理   修改   height   tle   流程   http   view   jpg   targe   

1、mvc模式簡介：

　　MVC的全名是Model View Controller，是模型(model)－視圖(view)－控制器(controller)的縮寫，是一種軟體設計典範。例如： angular

在網頁當中，

V即View視圖是指使用者看到並與之互動的介面。比如由html元素組成的網頁介面，或者軟體的用戶端介面。MVC的好處之一在於它能為應用程式處理很多不同的視圖。在視圖中其實沒有真正的處理髮生，它只是作為一種輸出資料並允許使用者操縱的方式。

M即model模型是指模型表示商務規則。在MVC的三個組件中，模型擁有最多的處理任務。被模型返回的資料是中立的，模型與資料格式無關，這樣一個模型能為多個視圖提供資料，由於應用於模型的代碼只需寫一次就可以被多個視圖重用，所以減少了代碼的重複性。

C即controller控制器是指控制器接受使用者的輸入並調用模型和視圖去完成使用者的需求，控制器本身不輸出任何東西和做任何處理。它只是接收請求並決定調用哪個模型構件去處理請求，然後再確定用哪個視圖來顯示返回的資料。

MVC的優點：

1.耦合性低

視圖層和業務層分離，這樣就允許更改視圖層代碼而不用重新編譯模型和控制器代碼，同樣，一個應用的商務程序或者商務規則的改變只需要改動MVC的模型層即可。因為模型與控制器和視圖相分離，所以很容易改變應用程式的資料層和商務規則。

2.重用性高

MVC模式允許使用各種不同樣式的視圖來訪問同一個伺服器端的代碼，因為多個視圖能共用一個模型，它包括任何WEB（HTTP）瀏覽器或者無線瀏覽器（wap），比如，使用者可以通過電腦也可通過手機來訂購某樣產品，雖然訂購的方式不一樣，但處理訂購產品的方式是一樣的。由於模型返回的資料沒有進行格式化，所以同樣的構件能被不同的介面使用。

3.部署快，生命週期成本低

MVC使開發和維護使用者介面的技術含量降低。使用MVC模式使開發時間得到相當大的縮減，它使程式員（Java開發人員）集中精力於商務邏輯，介面程式員（HTML和JSP開發人員）集中精力於表現形式上。

4.可維護性高

分離視圖層和商務邏輯層也使得WEB應用更易於維護和修改。

MVC的缺點：

1.完全理解MVC比較複雜。

由於MVC模式提出的時間不長，加上同學們的實踐經驗不足，所以完全理解並掌握MVC不是一個很容易的過程。

2.調試困難。

因為模型和視圖要嚴格的分離，這樣也給調試應用程式帶來了一定的困難，每個構件在使用之前都需要經過徹底的測試。

3.不適合小型，中等規模的應用程式

在一個中小型的應用程式中，強制性的使用MVC進行開發，往往會花費大量時間，並且不能體現MVC的優勢，同時會使開發變得繁瑣。

4.增加系統結構和實現的複雜性

對於簡單的介面，嚴格遵循MVC，使模型、視圖與控制器分離，會增加結構的複雜性，並可能產生過多的更新操作，降低運行效率。

5.視圖與控制器間的過於緊密的串連並且降低了視圖對模型資料的訪問

視圖與控制器是相互分離，但卻是聯絡緊密的組件，視圖沒有控制器的存在，其應用是很有限的，反之亦然，這樣就妨礙了他們的獨立重用。

依據模型操作介面的不同，視圖可能需要多次調用才能獲得足夠的顯示資料。對未變化資料的不必要的頻繁訪問，也將損害操作效能。

2、mvvm模式：

　　與MVC的區別在於中間多了個View Model，以前的MVC是view controller直接和model打交道，然後用model去填充view。例如：vue

MVVM的提出就是為了減輕view controller和view的負擔的，view model將資料加工邏輯從view controller和view中剝離出來，同時把view controller/view和model隔開。

可以看出view model的作用是：

1、和model打交道。

2、做一些邏輯處理和計算。

3、和view、view controller打交道，並提供更為直觀的資料，比如上面的行cellHeight，commentContent，favourString等屬性。

這樣一來，資料處理代碼被移到view model中了，view、view controller清爽了很多，而且職責更加分明，行高頻繁計算也避免了，因為行高被view model給緩衝了，只計算一遍就行了。

3、總結：

　　view和view controller擁有view model，view model擁有model，相比較MVC的區別在於view和view controller是通過view model來間接操作資料的。這樣做的意義在於，對於一些比較複雜的操作邏輯，可以寫到view model裡面，從而簡化view和view controller，view和view controller只幹展示資料和接受互動事件就好了；翻過model的update，驅動view model的update，然後再驅動view和view controller變化，這個中間的加工邏輯也可以寫在view model中。

 

 vue是一個 mvvm 架構，他強調的是組件化（react），並且吸收了 angular 的指令的靈活性。

 

mvc  mvp  mvvm(針對又複雜互動邏輯的前端應用，angular vue react)

 

vue: 資料驅動 +  組件化。

 

vue:輕量的 對於移動端比較好，更容易上手，學習平穩。核心思想：資料驅動，組件化。

mvvm模式和mvc模式 概述總結對比