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

相关推荐
亿坊电商几秒前
VUE混合开发,选哪个PHP框架最顺手?
前端·vue.js·php
新人11yj49 分钟前
如何给网页增加滚动到顶部的功能
前端·javascript
掘金一周9 分钟前
Figma Dev Mode MCP:大人,时代变了 | 掘金一周7.10
前端·人工智能·mcp
Data_Adventure14 分钟前
推荐几款开源 Canvas 和 WebGL 图形库
前端·webgl·canvas
我爱加班、、28 分钟前
element-plus表单校验失败问题
前端·javascript·vue.js·elementui·ecmascript
香香甜甜的辣椒炒肉33 分钟前
vue快速上手
前端·javascript·vue.js
b1gbrother1 小时前
让你的Claude Code变得更聪明
前端·程序员
国家不保护废物1 小时前
多模态模型数据传输的秘密武器:html5对象Blob深度解析
前端·面试·html
用户2519162427111 小时前
Canvas之概述,画布与画笔
前端·javascript·canvas
南方kenny1 小时前
前端小知识:搞懂 BFC块级格式化上下文,告别面试“拦路虎”!
前端·css·面试