目录

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 的区别和适用场景。

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
janthinasnail16 分钟前
编写一个简单的chrome截图扩展
前端·chrome
拉不动的猪32 分钟前
刷刷题40(vue中计算属性不能异步,如何实现异步)
前端·javascript·vue.js
冴羽yayujs43 分钟前
SvelteKit 最新中文文档教程(6)—— 状态管理
前端·javascript·vue.js·前端框架·react·svelte·sveltekit
烛阴1 小时前
前端进阶必学:JavaScript Class 的正确打开方式,让你代码更清晰!
前端·javascript
乐闻x1 小时前
如何创建HTML自定义元素:使用 Web Component 的最佳实践
前端·html·web component
ai产品老杨1 小时前
全流程数字化管理的智慧物流开源了。
前端·javascript·vue.js·人工智能·安全
波点兔1 小时前
【简单有效!】Gradio利用html插件实现video视频流循环播放
前端·html·gradio
烂蜻蜓1 小时前
全面解析 HTML 标签:简写与全称及其应用
前端·css·html·html5
肉肉不吃 肉1 小时前
axios 和 fetch异同点
前端
samroom2 小时前
React初学分享 事件绑定 组价通信 useState useEffect
前端·react.js·前端框架