浅谈MVVM模式和MVP模式——Vue.js向

传统前端开发的MVP模式

MVP

MVP开发模式的理解过程

  1. 首先代码分为三层：
    model层（数据层），
    presenter层（控制层/业务逻辑相关）
    view（视图层）

  2. MVP模式代码示例

    JQ

    M层在上图代码中不太明显，分析P层和V层是如何通信：

    1. 当视图发生改变，点击提交按钮后，控制器中的代码会执行。
    2. 控制器负责所有的逻辑，控制器可以去调模型层，比如发起ajax请求，只是此处代码并没有数据。
    3. 控制器处理完业务逻辑之后，控制器会通过DOM操作再去改变视图。
    4. 结合MVP模式图示，容易理解。

  3. Presenter是最核心的层，它是视图层和模型层的中转站。

  4. MVP的缺陷：
    1. 大量的代码都在presenter层，model层相比下很边缘。
    2. presenter层中大量的代码都是在操作DOM。

当前流行的MVVP模式

MVVM

图源自维基百科。MVVM的优点是有助于前端界面开发和后端逻辑的开发分离。其中VM视图模型是中介者，它负责从模型中转换数据对象，再呈现对象。从Vue.js的角度去看MVVM模式：

VUE.JS-MVVM

Vue框架设计同样有view层和model层，只是没有Presenter层，多了一层ViewModel。使用MVVM设计模式开发，我们不需要关注VM层，这是Vue.js内置的，只需要关注视图层和模型层。

  • Vue.js代码示例

    vue.js code
    vue代码中，没有任何DOM操作，代码中都是在写数据和写HTML也就是model层和view层。vue就是VM层。当视图层或者数据层发生改变时，VM层都会自动映射到对方。因此使用MVVM框架，最核心的层是数据层。

MVP和MVVM的直接比较

MVP面向DOM开发，MVVM面向数据开发。
MVVM让代码量更少

版权声明：本文为wljqds原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/wljqds/p/MVVM.html