一、MVC(model、view、controller):
流程图:

框架:比较早的backbone.js框架使用MVC模式。
结构:
model: 负责保存应用数据,与后端数据进行同步;
view: 负责视图展示,将model中的数据记性可视化;
controller: 负责业务逻辑,根据用户行为对model数据进行修改。
问题:
1.model和view的数据流混乱,维护麻烦;
2.一些逻辑代码在view中增加,导致view体积过于庞大,而controller比较单薄。
二、MVP(model、view、presenter):
流程图:

过度阶段,很快便被MVVM的出现替代
结构:
1.presenter,同时负责和model、view进行双向交互;view负责数据展示。
2.和MVC思想相通:controller/presenter负责逻辑处理,view负责显示;
问题:
1.相对于MVC,view变成了被动视图,但是体检缩小;
2.大部分逻辑都需要presenter处理,presenter体积过大,难以维护。
三、MVVM(model、view、viewModel):
流程图:

框架:Angular.js React.js Vue.js
结构:view和model被分离,三部分都被解耦。model是数据层,view是视图层。
问题:
1.低耦合: 视图(view)独立于model变化和修改,一个viewmodel可以绑定到不同的view,view变化的时候model可以不变,model变化的时候view也可以不变;
2.可复用性: 可以把一些视图逻辑放在一个viewmodel里,让很多view重用这段视图逻辑;
3.独立开发: 开发人员专注业务逻辑和数据开发,设计人员专注页面设计;
4.可测试: 可以针对viewmodel进行测试。