什么是MVVM？MVVM/MVP/MVC的区别？

目录

1、MVVM

2、MVC

3、MVP

4、MVVM/MVP/MVC的区别？

---

1、MVVM

① 定义

MVVM 是 Model-View-ViewModel 的缩写，是M-V-VM三部分组成。它本质上就是MVC的改进版。

M：Model 代表数据模型，负责封装和处理数据（在Model中定义数据修改和操作的业务逻辑）(数据结构)

V：View 代表视图UI，它负责加载和展示视图，例如显示图片、按钮等各种组件（将数据模型转化成UI 展现出来）（用户界面）

VM：ViewModel 类似于媒婆，起到了牵线搭桥的作用。VM 将视图UI和业务逻辑分开，监听模型数据的改变和控制视图行为。

VM中有2个重要的参数，DOM Listeners 和 Data Bindings 。DOM监听器它监听到 View 页面节点的变化，Model 数据也会随之改变；而当 Model 数据发生改变的时候，View界面也会发生改变。也就是说，ViewModel 负责把 Model的数据同步到 View 显示出来，还负责把 View 的修改同步回Model。这就是MVVM的双向数据绑定。

简单理解就是一个同步View 和 Model 的对象，连接 Model和View。

② 总结 

MVVM 采用双向数据绑定，View 中数据变化将自动反映到 Model上；反之，Model 中数据变化也将会自动展示在页面上。把Model和View关联起来的就是ViewModel。ViewModel 负责把 Model的数据同步到 View 显示出来，还负责把 View 的修改同步回Model。

③ 核心思想

MVVM核心思想，开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。也就是所谓的数据-视图分离，数据不会影响视图。

④ 优缺点 

优点：（分层架构、职责清晰、代码易维护）

① Controller简洁清晰
 ViewModel分离出来大部分的Controller代码，更加清晰和容易维护。

② 方便测试
大部分Bug来自于逻辑处理，由于ViewModel把逻辑分离出来，可对ViewModel构造单元测试。

③ 开发解耦
1）一位开发者负责逻辑实现，另一位开发者负责UI实现

2）敏捷开发中，并非等后端借口提供后再开发，提供前可完成Controller和View的开发工作。

④ 减少了大量DOM操作代码

⑤ MVVM在保持View和Model松耦合的同时，还减少了维护它们关系的代码，使用户专注于业务逻辑，兼顾开发效率和可维护性。

缺点：

① 代码量比MVC多；

② 需对每个Controller 实现绑定，这是分离不可避免的工作量。

2、MVC

Controller控制器的作用：接受参数；调用service层代码；控制页面跳转。

MVC的好处：强调责任分离，方便维护代码；

MVC的缺点：单向更改，开发过程并不灵活。编写效率不高，比较难维护。

3、MVP

随着应用变大，导致中间人体积增大，后期难以维护。

 

4、MVVM/MVP/MVC的区别？

① 这三者都是框架模式，它们设计目标都是为了解决Model和View的耦合问题；

② MVC模式出现较早，主要应用在后端，如Spring MVC、ASP.NET MVC等。在前端领域的早期也有应用，如Backbone.js。它的优点是分层清晰，缺点是数据流混乱，灵活性带来的维护性问题；

③ MVP模式是MVC的进化形式，Presenter作为中间层负责MV通信，解决了两者耦合问题，但P层过于臃肿会导致维护问题；

④ MVVM模式在前端领域有广泛应用，它不仅解决了MV耦合问题，还同时解决了维护两者映射关系的大量繁杂代码和DOM操作代码，在提高开发效率、可读性同时还保持了优越的性能表现。