web前端面试-- MVC、MVP、MVVM 架构模式对比
MVC、MVP、MVVM 架构模式对比
基本概念
这三种都是用于分离用户界面(UI)与业务逻辑的架构模式，旨在提高代码的可维护性、可测试性和可扩展性。
1. MVC (Model-View-Controller)
核心结构：
- Model：数据模型和业务逻辑
- View：用户界面展示
- Controller：接收用户输入并协调Model和View
数据流向：
用户操作 → View → Controller → Model → (通知) → View更新
特点：
- View可以直接访问Model
- Controller相对"厚重"，包含大量业务逻辑
- 常用于Web开发(如Spring MVC、Ruby on Rails)
2. MVP (Model-View-Presenter)
核心结构：
- Model：数据模型和业务逻辑
- View：用户界面(被动视图)
- Presenter：中间人，处理View逻辑
数据流向：
用户操作 → View → Presenter → Model → Presenter → View
特点：
- View不能直接访问Model
- Presenter持有View引用
- View是被动的，只负责显示
- 更易于单元测试(如Android早期开发常用)
3. MVVM (Model-View-ViewModel)
核心结构：
- Model：数据模型
- View：用户界面
- ViewModel：View的抽象(包含状态和命令)
数据流向：
用户操作 → View → ViewModel → Model → (数据绑定) → View自动更新
特点：
- 通过数据绑定实现自动更新
- ViewModel不知道View的存在
- 最适合数据驱动型应用(如WPF、Vue、Angular)
对比表格
| 特性 | MVC | MVP | MVVM |
|---|---|---|---|
| View职责 | 主动 | 被动 | 声明式 |
| 更新机制 | Controller手动更新 | Presenter手动更新 | 数据绑定自动更新 |
| 耦合度 | View知道Model | View不知道Model | View不知道Model |
| 测试难度 | 较难(Controller厚重) | 较易 | 最易(ViewModel独立) |
| 典型应用 | 传统Web应用 | Windows Forms应用 | 现代前端框架 |
| 通信方向 | 双向 | View→Presenter单向 | 双向(通过绑定) |
演进关系
MVC → MVP → MVVM
随着应用复杂度增加，架构模式不断演进，分离越来越彻底，测试越来越容易。
如何选择
- 简单项目：MVC足够
- 需要高测试性：MVP或MVVM
- 数据驱动UI：优先MVVM
- 平台支持：根据框架选择(如Android可用MVP/MVVM，Vue/Angular用MVVM)