浅谈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让代码量更少