MVC、MVP、MVVM三种模式的介绍及区别

MVC、MVP 和 MVVM 是三种常见的 软件架构设计模式 。

MVC

M : Model，负责存储页面的业务数据，以及对相应数据的操作。
V : View，负责页面的显示逻辑。
C : Controller， 是 View 层和 Model 层的纽带，负责用户与应用的响应操作。

在mvc模式中，通过分离 Model、View 和 Controller 的方式来组织代码结构。当用户与页面产生交互的时候，Controller 层的事件触发器就开始工作了，通过调用 Model 层，来完成对 Model 的修改，然后 Model 层再去通知 View 层更新。

MVP

M : Model，负责存储页面的业务数据，以及对相应数据的操作。
V : View，负责页面的显示以及与用户交互。
P : Presenter， 负责完成View于Model间的交互。

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

在 View 层通过 presenter 对象来调用 Model 层中数据请求的接口，而 Model 层中数据请求的结果会通过 presenter 中定义的接口回调给 presenter ，然后 presenter 在通知给 View 层。

MVVM

M : Model，负责存储页面的业务数据和业务逻辑。
V : View，负责页面的显示。
VM : ViewModel，负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作。

Model 层和 View 层并无直接关联，而是通过 ViewModel 来进行联系的，MVVM通过实现双向数据绑定来实现 Model 层和 View 层的同步更新。

双向数据绑定的实现：ViewModel 层通过 数据绑定 来将 Model 转化成 View ，通过 DOM 事件监听 来将 View 转化成 Model ，这样就实现了双向数据绑定的效果。

区别

MVC 与 MVP 的区别：
上面在介绍MVP模式的时候也讲到了二者之间的区别，MVC 模式下 Controller 只能获取 Model 的接口，所以它没有办法控制 View 层的更新，是通过 Model 来控制 View 层的更新的。而 MVP 模式下，View 层向 Presenter 层暴露了接口，所以 Presenter 层可以直接操作 View 层，实现了对 Model 层和 View 层的解耦。

MVP 与 MVVM 的区别：
通过上面的模型图来看，MVP 和 MVVM 模式似乎是相同的，其实不然。它们是相似的，唯一区别在于 MVVM 模式采用了双向数据绑定。开发者只需要更改 View 层或者 Model 层中的数据值，不需要进行同步 Model 层和 View 层的操作，因为数据的同步会由 ViewModel 层自动完成。而 MVP 模式中，开发者需要进行处理接收事件和 View 更新的工作。

👇觉得有帮助的朋友可以支持下作者哦，您的鼓励是我创作的最大动力，如有开发问题可联系作者