淺談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讓代碼量更少

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