MVC、MVP和MVVM的区别

1：MVC

（1）MVC基本概念

Model（模型）数据层，就是处理数据和封装逻辑的。主要负责处理数据和业务逻辑。
View（视图）视图层，就是你看到的用户界面。主要负责处理页面布局和展示。
Controller（控制器）逻辑层，可以理解为连接model和view的一个桥梁。负责处理并更新modal中的逻辑或处理View发送过来的数据
这三层互不影响，但又紧密联系。其中MVC有两种通信流程

（2）MVC流程

流程1：从view层获取用户指令，在controller层中进行操作，之后去model获取数据，最后渲染到view层，是一个循环的流程。
例子：用户提交表单后（进行操作）

流程2：从controller层来接收指令，进行操作后去model获取数据，最后渲染到view层，是一个循环的流程。
例子：用户进入某商城页面，直接请求渲染商品列表

（3）MVC优点

1：耦合性低：视图层和业务层分离，这样就允许更改视图层代码而不用重新编译模型和控制器代码。
2：重用性高：将数据层和控制层分开，可以最大化的重用代码了，同时间接使得开发和维护用户接口的技术含量降低。
3：可维护性高：分离视图层和控制层也使得项目更易于维护和修改。

（4）MVC缺点

1：不适合小中型的项目，MVC应用需要花费大量时间将，将其使用到规模并不是很大的项目上会增加结构的复杂性，并可能产生过多的更新操作，降低运行效率。
2：视图层与控制层间过于紧密连接。视图与控制器是相互分离，但却是联系紧密的部件，Modal不依赖于View，但是View是依赖于Modal一些业务在View里面实现了，要更改View也将是一件困难的事情。尤其是多个视图互相引用同一个Modal中的数据时。这种情况将变得更加复杂。

2: MVP(Modal-View-Presenter)

（1）MVP基本概念

Model（模型）数据层，就是处理数据和封装逻辑的。主要负责处理数据和业务逻辑。
View（视图）视图层，就是你看到的用户界面。主要负责处理页面布局和展示。
Presenter(观察者)观察层，它的功能与controller相同，也是负责连接view与model，但它改变了通信的方向。

（2）流程：view与presenter、presenter与model之间俩俩进行双向通信。（如上图所示）

（3）总结

View并不直接使用Modal，他们之间通过Presenter进行通信，所有的交互发生在Presenter内部。MVC中，View会直接从Modal中读取数据而不是Controller。
优：Presenter完全将Modal和View进行了分离，主要的逻辑在Presenter中实现。Presenter和View没有联系，而是通过定义好的接口实现，这样一来，当View发生变化的时候就可以保持Presenter的不变性，一旦Presenter不变，即可做到代码的重用。
劣：view层和presenter层的交互过于紧密，一旦view层需要修改，presenter层也要跟着变更。

3: MVVM（Model-View-ViewModel）

（1）基本概念

MVVM是基于MVC和MVP的进阶版。这也是介绍MVVM需求介绍MVC和MVP的原因。

Model（模型）数据层，就是处理数据和封装逻辑的。主要负责处理数据和业务逻辑。
View（视图）视图层，就是你看到的用户界面。主要负责处理页面布局和展示。
View-Model（视图模型）控制逻辑层，负责视图和数据的双向数据绑定。

（2）总结

MVVM的模式是基于数据绑定。View绑定到ViewModal，然后当View发生变化时通知ViewModal，ViewModal则和Modal进行通信，告诉Modal去更新View。
这样的目的和上面的两种模式一样：都是为了分离视图和模型。

（3）优点

1. 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
2. 可重用性。将一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
3. 独立开发。开发者只需要关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操作DOM的繁琐步骤中解脱出来。