淺談MVVM模式和MVP模式——Vue.js向

淺談MVVM模式和MVP模式——Vue.js向

傳統前端開發的MVP模式

MVP開發模式的理解過程

1. 首先代碼分爲三層： model層（數據層）， presenter層（控制層/業務邏輯相關） view（視圖層）

2. MVP模式代碼示例

   M層在上圖代碼中不太明顯，分析P層和V層是如何通訊：

   1. 當視圖發生改變，點擊提交按鈕後，控制器中的代碼會執行。
   2. 控制器負責全部的邏輯，控制器能夠去調模型層，好比發起ajax請求，只是此處代碼並無數據。
   3. 控制器處理完業務邏輯以後，控制器會經過DOM操做再去改變視圖。
   4. 結合MVP模式圖示，容易理解。

3. Presenter是最核心的層，它是視圖層和模型層的中轉站，但大量代碼在操做DOM。

4. MVP的缺陷：

   1. 大量的代碼都在presenter層，model層相比下很邊緣。
   2. presenter層中大量的代碼都是在操做DOM。

當前流行的MVVP模式

圖源自維基百科。MVVM的優勢是有助於前端界面開發和後端邏輯的開發分離。其中VM視圖模型是中介者，它負責從模型中轉換數據對象，再呈現對象。從Vue.js的角度去看MVVM模式：

Vue框架設計一樣有view層和model層，只是沒有Presenter層，多了一層ViewModel。使用MVVM設計模式開發，咱們不須要關注VM層，這是Vue.js內置的，只須要關注視圖層和模型層。

• Vue.js代碼示例

vue代碼中，沒有任何DOM操做，代碼中都是在寫數據和寫HTML也就是model層和view層。vue就是VM層。當視圖層或者數據層發生改變時，VM層都會自動映射到對方。所以使用MVVM框架，最核心的層是數據層。

MVP和MVVM的直接比較

MVP面向DOM開發，MVVM面向數據開發。 MVVM讓代碼量更少

原文出處：https://www.cnblogs.com/wljqds/p/MVVM.html