Yasin

Yasin

MVC → MVP → MVVM 演变过程

MVC → MVP → MVVM 演变过程

1. MVC（最早）

背景

早期 Web/桌面应用，所有逻辑都堆在一起，代码难以维护。
MVC 是第一个把"数据、界面、逻辑"分离的架构模式。

三层结构

Model  → 数据层（业务数据、数据库操作）
View   → 视图层（界面展示）
Controller → 控制层（处理用户输入，协调 M 和 V）

数据流

用户操作
  ↓
Controller 接收输入
  ↓
Controller 更新 Model
  ↓
Model 通知 View 更新
  ↓
View 直接读取 Model 数据渲染

解决了什么问题

  • 代码分层，职责分离
  • Model 可复用，可单独测试

遗留问题

  • View 和 Model 直接耦合（View 直接读 Model 数据）
  • Controller 容易变得臃肿
  • View 和 Controller 也有耦合，难以单独测试 View
      ┌──────────┐
      │Controller│
      └────┬─────┘
           │
    ┌──────┴──────┐
    ▼             ▼
 ┌──────┐     ┌──────┐
 │Model │◄────│View  │  ← View 直接依赖 Model，耦合
 └──────┘     └──────┘

2. MVP（MVC 的改进）

背景

MVC 里 View 和 Model 耦合太深，View 难以单独测试。
MVP 把 Controller 升级为 Presenter，把 View 和 Model 完全隔离。

三层结构

Model     → 数据层（和 MVC 一样）
View      → 视图层（只负责渲染，不直接操作 Model）
Presenter → 中间层（处理所有逻辑，连接 M 和 V）

数据流

用户操作
  ↓
View 把事件交给 Presenter
  ↓
Presenter 操作 Model
  ↓
Model 返回数据给 Presenter
  ↓
Presenter 更新 View

┌──────┐    ┌───────────┐    ┌──────┐
│ View │◄──►│ Presenter │◄──►│Model │
└──────┘    └───────────┘    └──────┘
  View 和 Model 完全不认识对方

解决了什么问题

  • View 和 Model 完全解耦
  • Presenter 可以单独测试
  • View 可以替换（换个 UI 框架，逻辑不变）

遗留问题

  • View 和 Presenter 一一对应，每个 View 都要写对应的 Presenter
  • Presenter 仍然需要手动更新 View（view.setText(...)）
  • 页面复杂时 Presenter 仍然很臃肿

3. MVVM（MVP 的进化）

背景

MVP 里 Presenter 手动更新 View 太繁琐。
MVVM 引入数据绑定，让 View 和 ViewModel 自动同步，不再需要手动操作 View。

三层结构

Model     → 数据层（和前两者一样）
View      → 视图层（声明式绑定 ViewModel 数据）
ViewModel → 视图模型（暴露数据和命令，不直接操作 View）

数据流

用户操作
  ↓
View（双向绑定）
  ↕  自动同步
ViewModel（暴露响应式数据）
  ↕
Model（业务数据）

┌──────┐  双向绑定  ┌───────────┐    ┌──────┐
│ View │◄─────────►│ ViewModel │◄──►│Model │
└──────┘           └───────────┘    └──────┘
  View 不需要手动更新，数据变了自动同步

解决了什么问题

  • 数据双向绑定，ViewModel 数据变了 View 自动更新
  • ViewModel 不持有 View 引用，彻底解耦
  • 代码量大幅减少（不再需要手动 setText、setVisible 等）
  • ViewModel 极易单独测试

三者核心差异总结

MVC MVP MVVM
V 和 M 的关系 直接耦合 完全隔离 完全隔离
谁更新 View Model 通知 View Presenter 手动更新 数据绑定自动更新
测试难度 难 中等 容易
代码量 中 较多 少
代表框架 Spring MVC Android（早期） Vue、Angular、WPF

和前端框架的关系

  • Vue：典型 MVVM

    • data = Model
    • template = View
    • Vue 实例 = ViewModel（响应式系统自动绑定）

  • React：接近 MVVM 但不完全是

    • 单向数据流，不是严格双向绑定
    • 更偏向"状态驱动 UI"的函数式思想

一句话总结

  • MVC：最早分层，但 View 和 Model 耦合。
  • MVP：彻底隔离 View 和 Model，但需要手动更新 View。
  • MVVM：引入数据绑定，View 和 ViewModel 自动同步，开发效率最高。

每一步演变都是为了解决上一代"手动同步 UI 状态"的痛点。

← 返回首页