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 的耦合度，提高代码的可维护性
目录