MVC和MVVM架构的区别

MVC和MVVM都是前端开发中常用的设计模式,都是为了解决前端开发中的复杂性而设计的,而MVVM模式则是一种基于MVC模式的新模式。

MVC(Model-View-Controller)的三个核心部分:模型、视图、控制器相较于MVVM(Model-View-ViewModel)的三个核心部分:模型、视图、视图模型的区别主要在于控制器和视图模型的区别,模型、视图几乎无差别。

在MVC模式中,视图与模型是通过控制器进行交互的,而在MVVM模式中,视图与视图模型之间是通过双向数据绑定进行交互的。拿flutter举个例子,MVC中View需要知道如何通过Controller来更新Model,并且必须手动调用setState()来刷新界面,MVVM通过数据绑定机制(如Provider),ViewModel的变化会自动反映到View上,减少了View对其他组件的直接依赖,实现了更加松散的耦合。

流程对比

MVC的流程

  • 用户交互:用户与View进行交互(如点击按钮)。

  • 调用Controller:View接收到用户的输入后,会直接调用相应的Controller方法。

  • 处理逻辑:Controller接收请求后,可能会操作Model(如更新数据),然后决定需要显示的数据。

  • 更新View:Controller可能通过返回值或直接调用View的方法通知View更新自身显示的内容。在某些实现中,View可能需要主动查询Model或Controller获取最新的数据状态。

  • 手动刷新UI:为了使UI反映出这些变化,通常需要在View中调用setState()(在Flutter中)或其他类似的方法来触发视图重绘。

MVVM的流程

  • 用户交互:用户与View交互(如点击按钮)。
  • 调用ViewModel方法:用户操作导致View调用ViewModel中的方法(例如,增加计数器的值)。
  • 处理逻辑并通知:ViewModel执行业务逻辑,并在数据发生变化时调用notifyListeners()(或类似的机制)。这一步骤不需要直接与View交互,它只是简单地通知其状态发生了变化。
  • 自动更新View:由于使用了数据绑定,当ViewModel的状态改变时,所有监听该状态的View都会自动更新,无需额外的手动干预。这意味着一旦ViewModel中的数据发生变化,界面就会自动反映这些变化,而不需要显式地调用setState()。

尽管两者都需要实例化Controller或ViewModel,但它们在流程和交互方式上有着本质的区别:

  • MVC更侧重于通过控制器作为中介来协调模型和视图之间的交互,要求视图主动查询或等待控制器的通知来进行更新。
  • MVVM利用数据绑定机制,使得视图能够自动响应ViewModel的变化,降低了视图与逻辑层之间的耦合度,简化了状态管理,提高了代码的可维护性和测试性。

总结:个人觉得就是数据绑定的区别,还有就是MVC中Controller充当中介让M和V通信,MVVM中相当于把双方的都拿来只让M或V与VM交互,不让M、V直接交互(MVVVM模式有着严格的规定,即View层与Model层不得直接进行通信)。

相关推荐
网安Ruler9 小时前
Web开发-PHP应用&TP框架&MVC模型&路由访问&模版渲染&安全写法&版本漏洞
前端·php·mvc
_码农1213815 小时前
使用mybatis生成器生成实体类mapper和查询参数文件,简单spring mvc 项目。使用log4j输出日志到控制台和文件中。使用配置文件注册Bean
spring·mvc·mybatis
杨DaB20 小时前
【SpringMVC】拦截器,实现小型登录验证
java·开发语言·后端·servlet·mvc
张小洛2 天前
Spring MVC设计精粹:源码级架构解析与实践指南
spring·架构·mvc
王柏龙3 天前
ASP.NET Core MVC中taghelper的ModelExpression详解
后端·asp.net·mvc
xxy!3 天前
Spring MVC数据传递全攻略
spring·mvc
杨DaB5 天前
【SpringMVC】MVC中Controller的配置 、RestFul的使用、页面重定向和转发
java·笔记·后端·学习·spring·mvc·restful
fouryears_234176 天前
@PathVariable与@RequestParam的区别
java·spring·mvc·springboot
王柏龙7 天前
Asp.net core mvc中TagHelper的GetChildContentAsync和Content区别
mvc·.netcore
hqxstudying8 天前
J2EE模式---业务代表模式
java·前端·python·设计模式·java-ee·mvc