MVVM、MVC、MVP 的区别

1. 核心定义与职责划分

(1) MVC（Model-View-Controller）

核心角色：

Model：管理数据与业务逻辑（如数据库操作）。

View：负责 UI 展示（如 HTML 模板）。

Controller：接收用户输入，协调 Model 和 View。

数据流：

用户操作 → Controller → 更新 Model → 通知 View 更新（或直接由 Controller 更新 View）。

特点：

双向通信：View 可以直接读取 Model，Model 变化也能直接通知 View（如观察者模式）。

Controller 较轻：仅处理输入逻辑，不涉及业务规则。

优点：结构清晰，适合服务端渲染；职责分离明确。

缺点：

View 与 Model 耦合，难以测试。

复杂应用中 Controller 可能变得臃肿（“Massive View Controller” 问题）。

(2) MVP（Model-View-Presenter）

核心角色：

Model：同 MVC，管理数据。

View：UI 展示，但通过接口与 Presenter 交互。

Presenter：代替 Controller，处理业务逻辑，直接操作 Model 和 View。

数据流：

用户操作 → View → 调用 Presenter → Presenter 更新 Model → Presenter 更新 View。

特点：

View 与 Model 解耦：View 不直接依赖 Model，通过 Presenter 中介。

Presenter 较重：包含业务逻辑和 UI 更新逻辑。

优点：

View 与 Model 完全解耦，便于单元测试。

Presenter 可复用，适合复杂业务逻辑。

缺点：

需要手动更新 View，代码量较大。

Presenter 与 View 接口可能过于繁琐。

(3) MVVM（Model-View-ViewModel）

核心角色：

Model：同 MVC，管理数据。

View：UI 展示，通过数据绑定与 ViewModel 同步。

ViewModel：暴露数据与命令供 View 绑定，监听 Model 变化并自动更新 View。

数据流：

用户操作 → View → 触发 ViewModel 命令 → 更新 Model → ViewModel 自动同步到 View（通过数据绑定）。

特点：

双向数据绑定：View 和 ViewModel 自动同步（如 Vue 的 v-model）。

ViewModel 无 UI 依赖：纯逻辑层，与 View 解耦。

优点：

数据绑定减少手动 DOM 操作，开发效率高。

ViewModel 可独立测试，与 UI 无关。

缺点：

过度依赖数据绑定可能导致调试困难（如“幽灵更新”）。

内存泄漏风险（需注意绑定销毁）。

核心区别对比

特性	MVC	MVP	MVVM
核心角色	Model-View-Controller	Model-View-Presenter	Model-View-ViewModel
View 职责	被动展示 UI	通过接口与 Presenter 交互	通过数据绑定与 ViewModel 同步
数据流方向	双向（View 可直读 Model）	单向（Presenter 控制流）	双向（数据绑定自动同步）
耦合度	View 与 Model 存在耦合	View 与 Model 完全解耦	View 与 Model 完全解耦
适用场景	传统后端或简单前端应用	需要测试的复杂交互（如 Android）	数据驱动型前端应用（如 Vue）
典型框架	Spring MVC、Ruby on Rails	Android MVP 架构	Vue.js、WPF（微软）