美文网首页
前端框架中 MVC 和 MVVM 两种设计方式的区别

前端框架中 MVC 和 MVVM 两种设计方式的区别

作者: 华山令狐冲 | 来源:发表于2024-01-02 08:41 被阅读0次

MVC 和 MVVM 是两种常见的软件架构模式。它们都致力于提供清晰的组织结构和代码分离,让开发者能够更有效率地开发和维护复杂的应用程序。然而,它们在组织代码和处理用户交互上有一些重要的区别。

首先,让我们了解一下 MVC(Model-View-Controller)模式。MVC 是一种设计模式,被广泛应用于 GUI 的设计开发中,它把软件系统分为三个基本部分:Model(模型),View(视图)和 Controller(控制器)。

  • Model 代表了业务数据和业务逻辑。它维护了应用程序的数据和状态,并定义了操作数据的方法。例如,如果你正在开发一个账单管理系统,Model 可能包括账单数据以及添加,删除,修改账单的方法。

  • View 是用户看到和交互的部分。它是 Model 的可视化表示。在上述的账单管理系统例子中,View 可以是一个显示账单列表的表格,或者是一个表单用于输入新的账单信息。

  • ControllerModelView 之间的协调者。它接收用户的输入,更新 Model,然后更新 View 来反映 Model 的新状态。在账单管理系统的例子中,当用户在表单中输入新的账单信息并点击提交按钮时,Controller 会将这个新的账单信息添加到 Model,然后更新 View 来显示新的账单列表。

然后,我们来看一下 MVVM(Model-View-ViewModel)模式。MVVM 模式也分为三个部分:Model(模型),View(视图)和 ViewModel(视图模型)。

  • Model 在 MVVM 中的角色与 MVC 中的相同,代表了业务数据和业务逻辑。

  • View 在 MVVM 中,与 MVC 中的角色也相同,代表了用户界面。

  • ViewModel 是 MVVM 中特有的部分,它是 ViewModel 之间的抽象,是 View 的模型表示。ViewModel 可以获得 Model 的信息,无需知道 Model 的具体实现;同样,View 可以观察和更新 ViewModel,而无需知道 Model 的存在。这样,ViewModel 就实现了解耦。

最大的区别在于 ControllerViewModel。在 MVC 中,Controller 直接与 ModelView 交互,处理用户输入,更新 Model,然后更新 View。而在 MVVM 中,ViewModel 提供了一个数据绑定的机制,这使得 View 可以自动更新当 Model 改变时,反之亦然。这使得 ViewModel 可以独立于 View 进行测试,提高了代码的可测试性。

相关文章

  • react和vue区别

    两者本质的区别:模板和组件化的区别Vue本质是MVVM框架,由MVC发展而来;React是前端组件化框架,由后端组...

  • Vue

    Node.js(后端)中的MVC与前端中的MVVM之间的区别 MVC是后端的分层开发概念,MVVM是前端视图层的概...

  • VUE常用知识点和面试题

    1、什么是MVC和MVVM,两种有什么区别 MVC和MVVM是两种架构模式。MVVM是指MODEL(模型)-VIE...

  • 通过样例来理解 MVC 模式

    参考: 自制前端框架之 MVC参考: MVC,MVP 和 MVVM 的图示 如何设计一个程序的结构,这是一门专门的...

  • 面试问题总结

    1. 说说对mvvm框架的理解。 mvvm框架有模型、视图、视图模型组成。它与mvc框架的区别在于,mvc模型、视...

  • React&Vue

    MVVM&MVC关于这两者我们要知道的事情是,两者均不是MVVM框架,只是借鉴了其思想。MVVM和MVC之间的区别...

  • iOS MVVM架构总结

    参考:iOS 中MVC设计模式iOS MVVM架构iOS MVVM-框架介绍iOS 架构模式MVVM的实践总结iO...

  • [iOS] MVVM

    几种常见的架构,MVC、MVP、MVVM,下面说说区别以及MVVM代码 MVC 相信大家都熟悉这个框架,这个也是初...

  • iOS-面试题6-架构

    目录: MVC-Apple MVC-变种 MVP MVVM 分层设计 架构与设计模式的区别 一. MVC-Appl...

  • 有浅入深分析MVC、MVP、MVVM

    1.总序 MVC/MVP/MVVM三者的区别 个人觉得,这三种设计框架最大的区别是:是否区分业务展示和业务逻辑...

网友评论

      本文标题:前端框架中 MVC 和 MVVM 两种设计方式的区别

      本文链接:https://www.haomeiwen.com/subject/ypodgdtx.html