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

发布时间 2023-12-09 13:06:53作者: JerryWang_汪子熙

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 进行测试,提高了代码的可测试性。