什么是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 来统一管理。也就是所谓的数据-视图分离，数据不会影响视图。

如图，Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的， Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。

这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注于数据的维护操作即可，而不需要自己操作 DOM。

④ 优缺点 

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

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

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

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

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

3）分离视图和模型，降低代码耦合，提高视图或者逻辑的重用性；

④ 利用双向绑定，数据更新后视图自动更新，让开发者从繁琐的手动 DOM 中解放；

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

缺点：

① 代码量比MVC多；

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

③ Bug 很难被调试：因为使⽤双向绑定的模式，当你看到界⾯异常了， 有可能是你 View 的代码有 Bug，也可能是 Model 的代码有问题。数据绑定使得⼀个位置的 Bug 被快速传递到别的位置，要定位原始出问题的地⽅就变得不那么容易了。另外，数据绑定的声明是指令式地写在 View 的模版当中的，这些内容是没办法去打断点 debug 的。⼀个⼤的模块中 model 也会很⼤，虽然使⽤⽅便了也很容易保证了数据的⼀致性，当时⻓期持有，不释放内存就造成了花费更多的内存。对于⼤型的图形应⽤程序，视图状态较多，ViewModel 的构建和维护 的成本都会⽐较⾼。

2、MVC

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

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

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

3、MVP

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

 

4、MVVM / MVP / MVC 的区别？

① 三种常见的框架模式（软件架构设计模式），它们设计目标都是为了解决 Model 和 View 的耦合问题；

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

MVC 模式中使用观察者模式，来实现当 Model 层数据发生变化的时候，通知 View 层的更新。这样 View 层 和 Model 层耦合在一起。当项目逻辑变得复杂的时候，可能会造成代码的混乱，并且可能会对代码的复用性造成一些问题。

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

MVP 的模式通过使用 Presenter 来实现对 View 层和 Model 层的解耦。MVC 中的 Controller 只知道 Model 的接口，因此它没有办法控制 View 层的更新。MVP 模式中，View 层的接口暴露给了 Presenter 因此可以在 Presenter 中将Model 的变化和 View 的变化绑定在一起，以此来实现 View 和 Model 的同步更新。这样就实现了对 View 和 Model 的解耦， Presenter 还包含了其他的响应逻辑。

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