MVC、MVP、MVVM三种架构对比

之前就总看到这三个模型的相关博客，在学习Vue的过程中，也总会接触到MVVM架构，今天按自己的理解写这篇博客

1.MVC

Model：数据层，对外暴露操作数据的接口
View：视图层，依赖Model中的数据，
Controller：控制器，操作Model中的数据

实现方式：观察者模式，View 依赖 Model，Model 不依赖 View，Model 变化之后，需要通知依赖他的 View（通知方式可以是调用 View 提供好的方法）

流程：View—>Controller—>Model—>View

MVC的应用场景：Backbone.js，Spine.js

优点： 耦合性低，视图层和业务层分离，允许更改视图层代码而不用重新编译模型和控制器代码；部署快；可维护性高
缺点： 不适合小型，中等规模的应用程序；增加系统结构和实现的复杂性

参考👉MVC的优缺点

2.MVP

Model：修改数据
View：更新界面
Presenter：通过 Model.js 对外暴露的接口操作数据；调用 HTML 提供的方法更新页面

Presenter分离了数据和视图，是Model与View的桥梁，MVP架构核心在Presenter。

流程：View—>Presenter—>Model—>Presenter—>View

MVP的应用场景：jQuery

优点： 模块职责划分明显，层次清晰，接口功能清晰；Model层和View层分离，解耦，修改View而不影响Model；功能复用性高
缺点： MVP中接口过多，额外的代码复杂度和学习成本

3.MVVM

Model：修改数据
View：界面
ViewModel：操作数据，响应请求

MVVM是MVP的改进版，Vue是典型的MVVM架构。template属于View，组件里面的js逻辑属于ViewModel层，Vue实例中的data属于Model

流程：View—>ViewModel—>Model—>ViewModel—>View

MVVM的应用场景：Vue，angular

优点： MVVM分离了视图和模型，降低代码耦合，提高视图或者逻辑的重用性。在MVVM设计模式中，我们只需要关注视图层和数据层，更多的精力需要花在数据层上，不需要我们自己操作DOM。
缺点： 比较难调Bug，因为MVVM使用了双向数据绑定的模式，当页面异常时，可能是View的代码有问题，也可能是Model代码有问题，数据绑定会让一个位置的bug很快传到别的地方，所以要定位原始bug位置不太容易。

4.MVC与MVP的区别

1. MVC中Model可以与View直接交互，而MVP中Model与View完全解耦，数据和视图直接的交互全交给Presenter
2. MVC中Model与View耦合在一起，如果View中方法改变，Model也要随之改变；而MVP通过Presenter实现UI交互逻辑，若UI有变化，Model不需要改动，只需要修改Presenter

5.MVP与MVVM的区别

可以参考这篇👉mvp和mvvm的区别

关于三种架构更详细的解释👉JavaScript 中的 MVC、MVP、MVVM