浅谈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