MVC、MVP 和 MVVM 架构模式

问题

什么是 MVVM？它与 MVC 有什么区别？什么又是 MVP？

解答

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

在早期的单页应用开发中，往往一个路由页面对应一个脚本文件，所有的页面逻辑都混合在一起：页面渲染、数据获取、用户事件响应等。简单项目看不出问题，但项目复杂后，文件会变得冗长混乱，不利于开发和维护。

MVC 模式

MVC 通过分离 Model、View 和 Controller 来组织代码：

• View：负责页面显示逻辑
• Model：存储业务数据，处理数据操作
• Controller：连接 View 和 Model，响应用户操作

View 和 Model 应用了观察者模式。当 Model 数据改变时，会通知 View 更新页面。用户与页面交互时，Controller 中的事件触发器调用 Model 完成数据修改，然后 Model 通知 View 更新。

MVP 模式

MVP 与 MVC 的主要区别在于 Presenter 替代了 Controller。

MVC 中 View 和 Model 通过观察者模式耦合在一起，项目复杂时可能造成代码混乱，影响复用性。MVP 通过 Presenter 实现了 View 和 Model 的解耦：

• View 层的接口暴露给 Presenter
• Presenter 将 Model 的变化和 View 的变化绑定在一起
• Presenter 手动控制 View 和 Model 的同步更新

这样 View 和 Model 完全分离，Presenter 负责所有的响应逻辑。

MVVM 模式

MVVM 中的 ViewModel 与 MVP 的思想相同，但通过双向数据绑定将 View 和 Model 的同步更新自动化了：

• Model 变化时，ViewModel 自动更新
• ViewModel 变化时，View 自动更新

这将 Presenter 中的手动同步工作自动化了。例如 Vue 通过数据劫持和发布订阅者模式实现双向数据绑定。

关键点

• MVC 中 View 和 Model 通过观察者模式通信，Controller 负责响应用户操作
• MVP 通过 Presenter 解耦 View 和 Model，Presenter 手动控制两者的同步
• MVVM 通过 ViewModel 和双向数据绑定自动化 View 和 Model 的同步更新
• 三种模式的演进方向是逐步降低 View 和 Model 的耦合度，提高代码的可维护性