38、 谈一下你对MVC、MVVM、MVP的理解

目录

1 MVC

2. MVP

3. MVVM

---

MVC、MVP 和 MVVM 是三种常见的软件架构设计模式，主要通过分离关注点的方式来组织代码结构，优化开发效率。

1 MVC

1）MVC 分为 View、Model、Controller：

1. View ：用户界面。
2. Model ：数据保存。负责存储页面的业务数据，以及对数据的处理方法。并且 View 和 Model 应用了观察者模式，当 Model 层发生改变的时候它会通知有关 View 层更新页面。
3. Controller ：业务逻辑。是 View 层和 Model 层的纽带，用于控制应用程序的流程，及页面的业务逻辑。当用户与页面产生交互的时候，Controller 通过调用 Model 层，来完成对 Model 的修改，然后 Model 层再去通知 View 层更新。

2）MVC的流程：

1. View 传送指令到 Controller ；

2. Controller 完成业务逻辑后，要求 Model 改变状态 ；

3. Model 将新的数据发送到 View，用户得到反馈。

2. MVP

MVP（Model-View-Presenter）是MVC的改良模式。

1）MVP 分为 Model、View、Presenter：

1. View ：用户界面。
2. Model ：数据保存。负责存储页面的业务数据，以及对数据的处理方法。
3. Presenter：负责完成View与Model间的交互。model获取数据，并填充到View中，使得View和Modle不直接联系。

2）MVP特点：

1. MVC中是允许Model和View进行交互的，而MVP中Model与View之间的交互由Presenter完成。（与MVC的区别）
2. 各部分之间的通信，都是双向的。除了Model和View之间。（与MVC的区别）
3. Presenter与View之间的交互是通过接口的。（与MVC的区别）
4. View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性。

3. MVVM

MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。

唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。

1）MVVM 分为 Model、View、ViewModel：

• View：代表UI视图，负责数据的展示；
• Model：代表数据模型，请求的原始数据；就是对于纯数据的处理，比如增删改查，与后台做交互；
• ViewModel（视图模型层）：负责监听Model中数据的改变并且控制视图View的更新，处理用户交互操作。

2）对ViewModel的进一步理解

1. 和MVC一样，View和Model是不可以直接进行通信的，ViewModel是连接view和model的桥梁。
2. 当用户操作View，ViewModel感知到变化，然后通知Model发生相应改变，反之亦然。
3. ViewModel向上与视图层View进行双向数据绑定，向下与Model通过接口请求进行数据交互，起到承上启下的作用。
4. mvvm实现了双向绑定，开发者只需要处理和维护 ViewModel，而不需要自己操作DOM去更新视图

3）双向绑定： 当View 层（表单）值发生变化，View 层绑定的 ViewModel 中的数据会得到自动更新；当 ViewModel 中数据变化，View 层会得到更新；

(View和Model进行双向绑定，两者之间有一方发生变化则会反映到另一方上。ViewModle要做的只是业务逻辑处理，以及修改View或者Modle的状态。)

4）优点：

1. 低耦合和可重用性。分离视图（View）和模型（Model）,降低代码耦合，提高视图或者逻辑的重用性。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定不同的"View"上，当View变化的时候Model不可以不变，当Model变化的时候View也可以不变。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑
2. 自动更新dom: 实现了 Model和View的数据自动同步，因此开发者只需要专注于数据的维护操作即可，而不需要自己操作DOM。 
3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
4. 可测试。界面素来是比较难于测试的，测试可以针对ViewModel来写。

5）缺点：

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