MVC、MVP、MVVM 架构详解
1. 前言
在软件开发中,界面与业务逻辑分离是代码可维护、可扩展、可测试的关键。
MVC、MVP、MVVM 是目前最主流的三种架构设计模式,它们的核心目标一致: 解耦 View(界面)与 Model(数据/业务),让结构更清晰。
本文不仅提供可视化图解,还对每个架构的可视化逻辑做深度解析,帮你理解'为什么这么设计''每个箭头/符号代表什么'。
本文详细解析了软件工程中三种主流架构模式:MVC、MVP 和 MVVM。通过可视化图解和深度分析,阐述了各模式中 View、Model 及中间层的职责与交互方式。MVC 强调 Controller 中转与 View 自主渲染,适用于 Web 后端;MVP 通过接口解耦 View 与 Presenter,适合桌面及原生开发;MVVM 利用双向绑定实现数据驱动,是现代前端主流。文章最后对比了三者的核心特点、适用场景及选择逻辑,帮助开发者理解架构设计本质并做出合理选型。
在软件开发中,界面与业务逻辑分离是代码可维护、可扩展、可测试的关键。
MVC、MVP、MVVM 是目前最主流的三种架构设计模式,它们的核心目标一致: 解耦 View(界面)与 Model(数据/业务),让结构更清晰。
本文不仅提供可视化图解,还对每个架构的可视化逻辑做深度解析,帮你理解'为什么这么设计''每个箭头/符号代表什么'。
无论 MVC / MVP / MVVM,都由以下 3 个基础角色构成:
最经典的架构模式,Web 后端首选。
┌───────────────┐ 🔹 上层:用户交互层,主动发起请求 │ View │ 🔹 核心:自主展示,有渲染决策权 │ (界面) │ └───────┬───────┘ │ 🔹 单向箭头:View → Controller 仅传递'操作请求' ▼ ┌───────────────┐ 🔹 中间层:纯中转,无展示决策权 │ Controller │ 🔹 核心:接收请求→调用Model→返回数据 │ (控制器) │ └───────┬───────┘ │ 🔹 单向箭头:Controller → Model 仅传递'数据处理指令' ▼ ┌───────────────┐ 🔹 下层:纯数据/业务处理,无界面感知 │ Model │ 🔹 核心:处理数据后,仅返回结果给Controller │(数据/业务) │ └───────────────┘ │ │ 🔹 单向箭头:Model → Controller 仅返回'处理结果' ▼ ┌───────────────┐ │ Controller │ 🔹 中间层二次处理:将Model结果整理为View可展示格式 │ (控制器) │ └───────┬───────┘ │ 🔹 单向箭头:Controller → View 仅传递'整理后的数据' ▼ ┌───────────────┐ │ View │ 🔹 最终:View自主决定数据渲染方式(排版/样式) │ (界面) │ └───────────────┘
MVC 的改进版,桌面/移动端原生首选(WinForm、Android、iOS)。
┌───────────────┐ 🔹 上层:纯展示层,无任何决策/逻辑能力 │ View │ 🔹 核心:仅做'接收操作 + 被动展示' │ (界面) │ └───────┬───────┘ │ ↕ 🔹 双向箭头:View ↔ Presenter 基于'接口通信' │ ↕ 🔹 View → Presenter:仅传递'操作事件'(无数据处理) │ ↕ 🔹 Presenter → View:直接控制'展示内容 + 样式' ▼ ┌───────────────┐ 🔹 中间层:全权控制层,接管所有逻辑/展示决策 │ Presenter │ 🔹 核心:接收事件→调用Model→决定展示方式→控制View │ (呈现器) │ └───────┬───────┘ │ 🔹 单向箭头:Presenter → Model 传递'数据处理指令' ▼ ┌───────────────┐ 🔹 下层:纯数据/业务处理,无界面感知 │ Model │ 🔹 核心:处理数据后,仅返回结果给Presenter │(数据/业务) │ └───────────────┘ │ │ 🔹 单向箭头:Model → Presenter 仅返回'处理结果' ▼ ┌───────────────┐ │ Presenter │ 🔹 中间层决策:决定数据展示样式/内容 │ (呈现器) │ └───────┬───────┘ │ ↕ 🔹 双向箭头:Presenter → View 直接赋值/控制展示 ▼ ┌───────────────┐ │ View │ 🔹 最终:View完全按Presenter要求展示,无自主决策 │ (界面) │ └───────────────┘
↕ 代表'双向接口通信',是 MVP 与 MVC 最核心的区别——View 暴露标准化接口(如 GetInputText()、ShowDataList()),Presenter 通过接口操作 View,而非直接依赖 View 类;OnQueryButtonClick()),不处理任何逻辑;View.ShowDataList(data)、View.SetTableStyle(style)),View 被动展示。现代化数据驱动架构,前端/跨平台首选,目前最主流。
┌───────────────┐ 🔹 上层:纯展示层,仅绑定数据,无逻辑 │ View │ 🔹 核心:数据绑定→自动刷新,无手动操作 │ (界面) │ └───────┬───────┘ │ ╍╍╍╍╍ 🔹 双向绑定符号:代表'数据自动同步' │ ╍双向绑定╍ 🔹 View ↔ ViewModel 数据实时同步,无代码干预 │ ╍╍╍╍╍ ▼ ┌───────────────┐ 🔹 中间层:View专属数据模型,适配 + 同步 │ ViewModel │ 🔹 核心:数据适配 + 命令处理 + 自动同步 │ (视图模型) │ └───────┬───────┘ │ 🔹 单向箭头:ViewModel → Model 传递'数据处理指令' ▼ ┌───────────────┐ 🔹 下层:纯数据/业务处理,无界面感知 │ Model │ 🔹 核心:处理数据后,仅返回结果给ViewModel │(数据/业务) │ └───────────────┘ │ │ 🔹 单向箭头:Model → ViewModel 仅返回'处理结果' ▼ ┌───────────────┐ │ ViewModel │ 🔹 中间层适配:将Model数据转为View可绑定格式 │ (视图模型) │ └───────┬───────┘ │ ╍╍╍╍╍ 🔹 双向绑定:ViewModel 数据变化→View 自动刷新 ▼ ┌───────────────┐ │ View │ 🔹 最终:View 自动刷新,无需手动调用任何方法 │ (界面) │ └───────────────┘
╍双向绑定╍ 是 MVVM 的灵魂,代表'数据驱动'——View 与 ViewModel 共享一份数据模型,一方变化,另一方自动更新,无需手动调用 SetData()/Refresh() 等方法;DateTime 转 string)、处理 View 触发的命令(如 QueryCommand),但不依赖 View;QueryCondition 属性;QueryCommand 命令触发,调用 Model 执行查询(如按'2024'查数据);List<ShowData>),更新自身 DataList 属性;DataList 变化自动同步到 View 的表格控件,View 自动刷新展示。View.SetData()/ViewModel.Refresh(),数据变化自动同步;| 架构 | 核心可视化符号 | 中间层角色 | View 自主性 | 解耦程度 | 核心优势 | 适用场景 |
|---|---|---|---|---|---|---|
| MVC | 单向箭头 → | 中转者 | 高(自主展示) | 中(View-C 耦合高) | 经典、适配 Web 单向请求 | ASP.NET MVC、Spring MVC |
| MVP | 双向接口 ↕ | 控制者 | 零(被动展示) | 高(接口解耦) | 易测试、View 可替换 | WinForm、Android/iOS 原生 |
| MVVM | 双向绑定 ╍╍╍ | 适配器 | 零(自动展示) | 极高(完全独立) | 开发快、无样板代码 | Vue、React、WPF、小程序 |
V → C → M ↑ │ └───────┘
核心:中转式单向流转,View 自主渲染
V ↔ P → M
核心:接口式双向控制,View 被动渲染
V ↔ VM → M 双向绑定
核心:数据式双向同步,View 自动渲染

微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online
JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online
Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online