推荐大家阅读廖雪峰的MVVM和阮一峰的MVC，MVP 和 MVVM 的图示和谈谈MVC，以及另一篇参考文章MVC、MVP及MVVM之间的关系

为什么需要架构模式？当数据有变更，我们可以用JS或者jQuery操作DOM。随着应用程序越来越复杂，需要在JS里面维护的字段也越来越多，需要监听事件和在事件回调用更新页面的DOM操作也越来越多，应用程序会变得非常难维护。

后来人们就想出使用了MVC、MVP的架构模式，希望能从代码组织方式来降低维护这种复杂应用程序的难度。但是MVC架构没办法减少你所维护的状态，也没有降低状态更新你需要对页面的更新操作（前端来说就是DOM操作），你需要操作的DOM还是需要操作，只是换了个地方。后来人们想出了MVVM模式，只要在模版中声明视图组件是和什么状态进行绑定的，双向绑定引擎就会在状态更新的时候自动更新视图。

MVC、MVP、MVVM都是一种架构模式，为了解决图形界面应用程序复杂性管理问题而产生的应用架构模式。

MVC模式概述

View 是提供给用户的操作界面，是程序的外壳
Model 是程序需要操作的数据和信息
Controller 接收View层传递过来的指令，选取Model层对应的数据，进行相应操作

举一个现实中的类似的例子，MVC如同一家商铺的运作模式，View层相当于是这家商铺的店面，Model层相当于这家商铺的仓库，Controller层相当于是这家商铺的执行部门。

MVC的通信都是单向的，三层是紧密联系在一起的，但又是互相独立的，每一层内部的变化不影响其他层。每一层都对外提供接口（Interface），供上面一层调用。这样一来，软件就可以实现模块化，修改外观或者变更数据都不用修改其他层，大大方便了维护和升级。

缺点：

1、View更新的时候，必须要通过Controller去更新一遍Model；同样的Model更新的时候，也要去更新一遍视图。此时开发者是在同时维护View层和Model层，同时兼顾Dom和Data
2、View层与Model层耦合，复用性差
3、同样是由于View和Model耦合，数据流会十分混乱

MVP 模式

MVP是从MVC进化而来，即Model、View、Presenter；View和Model同MVC中的M和V，MVP只是将MVC中的Controller变成了Presenter

MVP与MVC还有一点不同是，它的通信是双向的，如下图所示，有两个方向：V—>P—>M，M—>P—>V

缺点： 1、同时兼顾Dom和Data，保证数据的状态、页面的展示都是正确的

MVVM 模式

MVVM是由MVP进化而来，MVVM模式基本上与MVP相同，只是把MVP中的P变成了VM，即ViewModel。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

ViewModel如何编写？需要用JavaScript编写一个通用的ViewModel，这样，就可以复用整个MVVM模型了。一个MVVM框架和jQuery操作DOM相比有什么区别？

用jQuery实现的修改两个DOM节点的例子，用jQuery修改name和age节点的内容：

<p>Hello, <span id="name">Bart</span></p>
<p>You are <span id="age">12</span></p>

var name = 'Homer';
var age = 51;

$('#name').text(name);
$('#age').text(age);

使用MVVM框架来实现同样的功能，我们首先并不关心DOM的结构，而是关心数据如何存储

<p>Hello, <span>{person.name}</span></p>
<p>You are <span>{person.age}</span></p>
var person = {
    name: 'Bart',
    age: 12
};

person.name = 'Homer';
person.age = 51;

MVVM的设计思想：关注Model的变化，让MVVM框架去自动更新DOM的状态，实现数据驱动视图，从而把开发者从操作DOM的繁琐步骤中解脱出来

React

react只是用于构建用户界面的一个库，并不是一个framework，因为它没有一整套的解决方案。react本身只是一个函数，最多算一个 m→v 架构。

UI = F(data)

甚至可以理解，react 就是一个 dom 拼接工具，把数据拼成新 dom 替换旧 dom 。当然，它性能很高，会尽可能复用 dom 来提高性能。

框架模型MVC、MVP、MVVM

MVC模式概述

MVP 模式

MVVM 模式

React