前言

一、MVC（Model-View-Controller）

1、简介

2、框架图

二、MVP（Model-View-Presenter）

1、简介

2、框架图

三、MVVM（Model-View-ViewModel）

1、简介

2、框架图

四、总结

前言

MV系列框架中，M和V分别指Model层和View层，但其功能会因为框架的不同而变化。Model层是数据模型，用来存储数据；View层是视图，展示Model层的数据。

虽然在不同的框架中，Model层和View层的内容可能会有所差别，但是其基础功能不变，变的只是数据的传输方式。

一、MVC（Model-View-Controller）

1、简介

MVC是模型-视图-控制器，它是MVC、MVP、MVVM这三者中最早产生的框架，其他两个框架是以它为基础发展而来的。

MVC的目的就是将M和V的代码分离，且MVC是单向通信，必须通过Controller来承上启下。

Model：模型层，数据模型及其业务逻辑，是针对业务模型建立的数据结构，Model与View无关，而与业务有关。

View：视图层，用于与用户实现交互的页面，通常实现数据的输入和输出功能。

Controller：控制器，用于连接Model层和View层，完成Model层和View层的交互。还可以处理页面业务逻辑，它接收并处理来自用户的请求，并将Model返回给用户。

2、框架图

MVC框架图如图1.1示。

图1.1 MVC框架图

上图可以看出各部分之间的通信是单向的，呈三角形状。

具体MVC框架流程图如图1.2所示。

图1.2 MVC框架流程图

从上图可以看出，Controller层触发View层时，并不会更新View层中的数据，View层的数据是通过监听Model层数据变化自动更新的，与Controller层无关。换言之，Controller存在的目的是确保M和V的同步，一旦M改变，V应该同步更新。

同时，我们可以看到，MVC框架大部分逻辑都集中在Controller层，代码量也集中在Controller层，这带给Controller层很大压力，而已经有独立处理事件能力的View层却没有用到；而且，Controller层与View层之间是一一对应的，断绝了View层复用的可能，因而产生了很多冗余代码。

为了解决上述问题，MVP框架被提出。

二、MVP（Model-View-Presenter）

1、简介

MVP是模型-视图-表示器，它比MVC框架大概晚出现20年，是从MVC模式演变而来的。它们的基本思想有相同之处：Model层提供数据，View层负责视图显示，Controller/Presenter层负责逻辑的处理。将Controller改名为Presenter的同时改变了通信方向。

Model：模型层，用于数据存储以及业务逻辑。

View：视图层，用于展示与用户实现交互的页面，通常实现数据的输入和输出功能。

Presenter：表示器，用于连接M层、V层，完成Model层与View层的交互，还可以进行业务逻辑的处理。

2、框架图

MVP框架图如图2.1示。

图2.1 MVP框架图

上图可以看出各部分之间的通信是双向的。

在MVC框架中，View层可以通过访问Model层来更新，但在MVP框架中，View层不能再直接访问Model层，必须通过Presenter层提供的接口，然后Presenter层再去访问Model层。

具体MVP框架流程图如图2.2所示。

图2.2 MVP框架流程图

从上图可以看出，View层和Model层互不干涉，View层也自由了很多，所以View层可以抽离出来做成组件，在复用性上就比MVC框架好很多。

但是，由于View层和Model层都需要经过Presenter层，导致Presenter层比较复杂，维护起来也会有一定的问题；而且，因为没有绑定数据，所有数据都需要Presenter层进行“手动同步”，代码量较大，虽然比起MVC框架好很多，但还是有比较多冗余部分。

为了让View层和Model层的数据始终保持一致，MVVM框架出现了。

三、MVVM（Model-View-ViewModel）

1、简介

MVVM是模型-视图-视图模型。MVVM与MVP框架区别在于：MVVM采用双向绑定：View的变动，自动反映在ViewModel，反之亦然。

Model：数据模型（数据处理业务），指的是后端传递的数据。

View：视图，将Model的数据以某种方式展示出来。

ViewModel：视图模型，数据的双向绑定（当Model中的数据发生改变时View就感知到，当View中的数据发生变化时Model也能感知到），是MVVM模式的核心。ViewModel 层把 Model 层和 View 层的数据同步自动化了，解决了 MVP 框架中数据同步比较麻烦的问题，不仅减轻了 ViewModel 层的压力，同时使得数据处理更加方便——只需告诉 View 层展示的数据是 Model 层中的哪一部分即可。

2、框架图

MVVM框架图如图3.1示。

图3.1 MVVM框架图

上图可以看出各部分之间的通信是双向的，而且我们可以看出，MVVM框架图和MVP框架图很相似，两者都是从View层开始触发用户的操作，之后经过第三层，最后到达Model层。而关键问题就在于这第三层的内容，Presenter层是采用手动写方法来调用或修改View层和Model层；而ViewModel层双向绑定了View层和Model层，因此，随着View层的数据变化，系统会自动修改Model层的数据，反之同理。

具体MVVM框架流程图如图3.2所示。

图3.2 MVVM框架流程图

从上图可以看出，View层和Model层之间的数据传递经过了ViewModel层，ViewModel层并没有对其进行“手动绑定”，不仅使速度有了一定的提高，代码量也减少很多，相比于MVC框架和MVP框架，MVVM框架有了长足的进步。

从3.1框架图可以看出，MVVM框架有大致两个方向：

1、模型-->视图 ——实现方式：数据绑定

2、视图-->模型 ——实现方式：DOM事件监听

存在两个方向都实现的情况，叫做数据的双向绑定。双向数据绑定可以说是一个模板引擎，它会根据数据的变化实时渲染。如图3.3所示，View层和Model层之间的修改都会同步到对方。

图3.3 数据的双向绑定

MVVM模型中数据绑定方法一般有三种：

数据劫持

发布-订阅模式

脏值检查

补充：Vue.js使用的就是数据劫持和发布-订阅模式两种方法。了解Vue.js数据绑定流程前，我们需要了解这三个概念：

Observer：数据监听器，用于监听数据变化，如果数据发生改变，不论是在View层还是在Model层，Observer都会知道，然后告诉Watcher。

Compiler：指定解析器，用于对数据进行解析，之后绑定指定的事件，在这里主要用于更新视图。

Watcher：订阅者。

接下来看看Vue.js数据绑定的流程：首先将需要绑定的数据劫持方法找出来，之后用Observer监听这堆数据，如果数据发生变化，Observer就会告诉Watcher，然后Watcher会决定让那个Compiler去做出相应的操作，这样就完成了数据的双向绑定。

四、总结

从MVC到MVP再到MVVM，这是一个不断进步的过程，后两者都是在MVC基础上发展而来，使用起来更加方便。这三者主要的区别在于除Model层和View层之外的第三层的不同。

三种架构模式——MVC、MVP、MVVM相关推荐

mvvm模式和mvc的区别_Android 开发中的架构模式 -- MVC / MVP / MVVM
预备知识了解 Android 基本开发看完本文可以达到什么程度了解如何分析一个架构模式掌握 MVC,MVP,MVVM 架构定义和实现更多面试内容,面试专题,flutter视频全套,音视频从 ...
Android App的设计架构：MVC,MVP,MVVM与架构经验谈
本文转载自https://www.tianmaying.com/tutorial/AndroidMVC,原文作者周鸿博. 和MVC框架模式一样,Model模型处理数据代码不变在Android的App开 ...
MVC---Android App的设计架构：MVC,MVP,MVVM与架构经验谈
转载自: http://www.tianmaying.com/tutorial/AndroidMVC 1.架构设计的目的通过设计使程序模块化,做到模块内部的高聚合和模块之间的低耦合.这样做的好处是使 ...
界面之下：还原真实的MV*模式 -( MVC , MVP , MVVM )
UPDATE(2015-10-29):更新MV*关于业务逻辑的描述,此处感谢 @LuoPQ @finian 指出错误作者:戴嘉华转载请注明出处并保留原文链接( #11 )和作者信息. 目录: 前言 ...
架构：常用的三种架构模式
在做架构设计的时候,一般会采用一些架构模式,便于设计和以后需求变更时修改代码.如果设计模式选择得不正确那么很容易造成架构的混乱,代码也会变成怪物. 分层模式分层模式分层模式是最常见的模式.我们熟悉 ...
Android 开发架构-MVC MVP MVVM详解
何为架构架构,即程序的逻辑组织结构,是指导开发过程中划分程序逻辑模块的关键,好的架构要使程序达到高内聚低耦合的设计目标.例如一个人,身体的骨骼即为身体的架构,有了基本骨架之后,才可以决定在头颅里开发 ...
java mvc mvp mvvm_一篇文章了解架构模式：MVC/MVP/MVVM
架构模式的文章很多,好理解的没有几个.大部分文章出现的主要问题有: 没有设定好作用域:前端MVC是改造过的MVC,和后台MVC有明显的区别,不能一概而论没有实际的例子:实际的例子对应日常的工作,没有 ...
iOS-【转载】架构模式 - 简述 MVC, MVP, MVVM 和 VIPER
看了很多篇关于 iOS 架构模式的,尤其是关于 MVVM 的,都是似懂非懂,无意看见了这篇,发现总结的很到位,很用心,特转载至此,如果英语好,请看原文 iOS Architecture Pattern ...
iOS-【转载】架构模式 - 简述 MVC, MVP, MVVM 和 VIPER (译)
看了很多篇关于 iOS 架构模式的,尤其是关于 MVVM 的,都是似懂非懂,无意看见了这篇,发现总结的很到位,很用心,特转载至此,如果英语好,请看原文 iOS Architecture Pattern ...

三种架构模式——MVC、MVP、MVVM

前言

一、MVC（Model-View-Controller）

1、简介

2、框架图

二、MVP（Model-View-Presenter）

1、简介

2、框架图

三、MVVM（Model-View-ViewModel）

1、简介

2、框架图

四、总结

三种架构模式——MVC、MVP、MVVM相关推荐

最新文章

热门文章