MVC,MVP,MVVM区别的形象化说明

MVP(Model-View-Presenter)

场景描述:

Model(模型) :菜单数据(菜品名称、价格、库存等)。 • View(视图) :菜单展示界面(顾客看到的菜单)。 • Presenter(主持人):服务员(负责接收顾客的点餐请求,处理逻辑,并更新菜单数据)。

流程:

  1. 顾客(用户)在菜单界面(View)选择菜品。
  2. 服务员(Presenter)接收顾客的点餐请求。
  3. 服务员(Presenter)检查菜单数据(Model)是否有库存。
  4. 如果有库存,服务员(Presenter)更新菜单数据(Model),并通知厨房(View 更新界面)。
  5. 如果没有库存,服务员(Presenter)告诉顾客"菜品已售罄"(View 更新界面)。

特点:

Presenter 是核心 :负责处理逻辑和协调 Model 与 View。 • View 和 Model 没有直接交互 :所有数据交互都通过 Presenter 进行。 • View 更被动:只负责展示数据,不处理逻辑。


MVVM(Model-View-ViewModel)

场景描述:

Model(模型) :菜单数据(菜品名称、价格、库存等)。 • View(视图) :菜单展示界面(顾客看到的菜单)。 • ViewModel(视图模型):智能服务员(负责将菜单数据转换为界面可展示的形式,并自动更新界面)。

流程:

  1. 顾客(用户)在菜单界面(View)选择菜品。
  2. 智能服务员(ViewModel)自动检测到顾客的选择,并检查菜单数据(Model)是否有库存。
  3. 如果有库存,智能服务员(ViewModel)更新菜单数据(Model),并自动更新菜单界面(View)。
  4. 如果没有库存,智能服务员(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)只需选择菜品,界面会自动更新,适合现代前端框架。

通过这个例子,可以更直观地理解 MVCMVPMVVM 的区别和适用场景。

相关推荐
码农捻旧13 分钟前
前端性能优化:从之理论到实践的破局道
前端·性能优化
3Katrina14 分钟前
前端面试之防抖节流(一)
前端·javascript·面试
浏览器API调用工程师_Taylor26 分钟前
自动化重复任务:从手动操作到效率飞跃
前端·javascript·爬虫
赵润凤35 分钟前
Vue 高级视频播放器实现指南
前端
FogLetter1 小时前
从原生JS事件到React事件机制:深入理解前端事件处理
前端·javascript·react.js
小公主1 小时前
如何利用闭包封装私有变量?掌握防抖、节流与 this 问题的巧妙解决方案
前端
烛阴1 小时前
JavaScript 的动态魔法:使用 constructor 动态创建函数
前端·javascript
前端 贾公子1 小时前
tailwind ( uni ) === 自定义主题
前端
独立开阀者_FwtCoder1 小时前
大制作!在线 CSS 动效 编辑神器!太炫酷了!
前端·javascript·github
白白李媛媛1 小时前
vue3中实现echarts打印功能
前端·vue.js·echarts