MVP（Model-View-Presenter）
场景描述：
• Model（模型） ：菜单数据（菜品名称、价格、库存等）。 • View（视图） ：菜单展示界面（顾客看到的菜单）。 • Presenter（主持人）：服务员（负责接收顾客的点餐请求，处理逻辑，并更新菜单数据）。
流程：
- 顾客（用户）在菜单界面（View）选择菜品。
- 服务员（Presenter）接收顾客的点餐请求。
- 服务员（Presenter）检查菜单数据（Model）是否有库存。
- 如果有库存，服务员（Presenter）更新菜单数据（Model），并通知厨房（View 更新界面）。
- 如果没有库存，服务员（Presenter）告诉顾客"菜品已售罄"（View 更新界面）。
特点：
• Presenter 是核心 ：负责处理逻辑和协调 Model 与 View。 • View 和 Model 没有直接交互 ：所有数据交互都通过 Presenter 进行。 • View 更被动：只负责展示数据，不处理逻辑。
MVVM（Model-View-ViewModel）
场景描述：
• Model（模型） ：菜单数据（菜品名称、价格、库存等）。 • View（视图） ：菜单展示界面（顾客看到的菜单）。 • ViewModel（视图模型）：智能服务员（负责将菜单数据转换为界面可展示的形式，并自动更新界面）。
流程：
- 顾客（用户）在菜单界面（View）选择菜品。
- 智能服务员（ViewModel）自动检测到顾客的选择，并检查菜单数据（Model）是否有库存。
- 如果有库存，智能服务员（ViewModel）更新菜单数据（Model），并自动更新菜单界面（View）。
- 如果没有库存，智能服务员（ViewModel）自动更新菜单界面（View），显示"菜品已售罄"。
特点：
• ViewModel 是核心 ：负责将 Model 数据转换为 View 可展示的形式，并自动更新 View。 • View 和 Model 没有直接交互 ：所有数据交互都通过 ViewModel 进行。 • 数据绑定：View 和 ViewModel 之间通过数据绑定自动同步，无需手动更新界面。
三者的对比
| 特性 | MVC | MVP | MVVM |
|---|---|---|---|
| View 和 Model 的交互 | View 可以直接访问 Model | View 不能直接访问 Model，必须通过 Presenter | View 不能直接访问 Model，必须通过 ViewModel |
| 核心角色 | Controller | Presenter | ViewModel |
| View 的被动性 | View 是主动的，可以直接更新自己 | View 是被动的，只能通过 Presenter 更新 | View 是被动的，通过数据绑定自动更新 |
| 交互方式 | 手动更新 | 通过 Presenter 手动更新 | 数据绑定，自动更新 |
| 适用场景 | 传统 Web 应用 | 需要解耦 View 和 Model 的场景 | 现代前端框架（如 Vue、React） |
总结
• MVC ：像传统的餐厅点餐系统，服务员（Controller）是核心，负责协调顾客（View）和厨房（Model），但 View 和 Model 可以直接交互。 • MVP ：像升级版的餐厅点餐系统，服务员（Presenter）完全接管了 View 和 Model 的交互，View 更被动，适合需要解耦的场景。 • MVVM：像智能餐厅点餐系统，智能服务员（ViewModel）自动处理一切，顾客（View）只需选择菜品，界面会自动更新，适合现代前端框架。
通过这个例子，可以更直观地理解 MVC 、MVP 和 MVVM 的区别和适用场景。