MVC 与 MVVM：示例的主要区别

傷城~ 2023-09-28 08:02 147阅读 0赞

### 什么是 MVC？ ###

MVC 框架是一种架构模式，它将应用程序分为三个主要的逻辑组件模型、视图和控制器。因此缩写为 MVC。完整形式的 MVC 是模型视图控制器。

在此体系结构中，构建了一个组件来处理应用程序的特定开发方面。MVC 将业务逻辑和表示层相互分离。这种架构模式主要用于桌面图形用户界面（GUI）。

### 什么是 MVVM？ ###

MVVM 架构借助标记语言或 GUI 代码促进了图形用户界面的开发分离。MVVM 的完整形式是 Model-View-ViewModel。

MVVM 的视图模型是一个值转换器，这意味着视图模型负责以一种易于管理和呈现对象的方式从模型中公开数据对象。

### 主要区别 ###

*  MVC 框架是一种架构模式，它将应用程序分为三个主要的逻辑组件模型、视图和控制器。另一方面，MVVM 借助标记语言或 GUI 代码促进了图形用户界面的开发分离
 *  在 MVC 中，控制器是应用程序的入口点，而在 MVVM 中，视图是应用程序的入口点。
 *  MVC Model 组件可以独立于用户进行测试，而 MVVM 易于进行单独的单元测试，并且代码是事件驱动的。
 *  MVC 架构在 Controller 和 View 之间具有“一对多”关系，而在 MVVC 架构中，在 View 和 View Model 之间具有“一对多”关系。

### MVC 模式 ###

![c1ac8763124d849642b799c6bceb2d89.png][]

MVC 架构

三个重要的 MVC 组件是：

*  **模型：**它包括所有数据及其相关逻辑。
 *  **查看：**向用户呈现数据或处理用户交互。
 *  **控制器：**模型和视图组件之间的接口。

让我们详细了解每个组件：

#### 模型 ####

模型组件存储数据和相关逻辑。它表示在控制器组件或任何其他相关业务逻辑之间传输的数据。

例如，控制器对象可帮助您从数据库中检索客户信息。它处理数据并将其发送回数据库或使用它来呈现相同的数据。

#### 看法 ####

视图是应用程序中代表数据表示的部分。视图是由从模型数据中收集的数据创建的。视图请求模型提供信息，以便将输出重新发送给用户。

视图还表示来自图表、图表和表格的数据。例如，任何客户视图都将包括所有 UI 组件，如文本框、下拉列表等。

#### 控制器 ####

控制器是应用程序中处理用户交互的部分。控制器解释用户的鼠标和键盘输入，通知模型和视图进行适当的更改。

控制器向模型发送命令以更新其状态（例如，保存特定文档）。控制器还向其关联的视图发送命令以更改视图的呈现（例如，滚动特定文档）。

### MVVM 模式 ###

这是 MVVM 的一个模式：

![0ff7cb13e52361c82cd7e950e1a97eba.png][]

MVVM 架构

MVVM 架构在视图和视图模型之间提供双向数据绑定。它还可以帮助您自动将 View-Model 中的修改传播到视图。视图模型利用观察者模式在视图模型中进行更改。

让我们详细了解一下这个组件：

#### 模型 ####

模型存储数据和相关逻辑。它表示在控制器组件或任何其他相关业务逻辑之间传输的数据。

例如，控制器对象将从学校数据库中检索学生信息。它处理数据并将其发送回数据库或使用它来呈现相同的数据。

#### 看法： ####

视图代表 HTML、CSS、jQuery 等 UI 组件。在 MVVC 模式中，视图负责显示从控制器接收到的数据作为结果。此视图也将模型转换为用户界面 (UI)。

#### 查看型号： ####

视图模型负责呈现功能、命令、方法，以支持视图的状态。它还负责操作模型并激活视图中的事件。

### MVC的特点 ###

以下是 MVC 的重要特性：

*  简单且无摩擦的可测试性。高度可测试、可扩展和可插拔的框架
 *  您还可以利用 ASP.NET、Django、JSP 等提供的现有功能。
 *  它提供对您的 HTML 和 URL 的完全控制。
 *  它支持测试驱动开发（TDD）
 *  这种架构提供了逻辑分离
 *  允许为 SEO 友好的 URL 路由。
 *  提供可理解和可搜索的 URL 映射。

### MVVM 的特点 ###

以下是 MVVM 架构的特点：

*  MVVM 是为具有数据绑定功能的桌面应用程序编写的 - XAML 和 INotifyPropertyChanged 接口
 *  如果要在 View-Model 中进行修改，View-Model 使用观察者模式。
 *  MVVM 模式主要被[WPF][]、Silverlight、nRoute 等使用。

### MVVM 和 MVC 之间的区别 ###

这里，是 MVVM 和 MVC 之间的重要区别

![538bc8d814f81aeef299dc7d4e30b9ed.png][]

<table style="margin-left:0px;"> 
 <tbody> 
  <tr> 
   <th style="text-align:left;">MVC</th> 
   <th style="text-align:left;">MVVM</th> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;">控制器是应用程序的入口点。</td> 
   <td style="background-color:#ffffff;">视图是应用程序的入口点。</td> 
  </tr> 
  <tr> 
   <td style="background-color:#f9f9f9;">控制器和视图之间的一对多关系。</td> 
   <td style="background-color:#f9f9f9;">视图和视图模型之间的一对多关系。</td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;">View 没有对控制器的引用</td> 
   <td style="background-color:#ffffff;">View 有对 View-Model 的引用。</td> 
  </tr> 
  <tr> 
   <td style="background-color:#f9f9f9;">MVC 是旧模型</td> 
   <td style="background-color:#f9f9f9;">MVVM 是一个相对较新的模型。</td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;">难以阅读、更改、单元测试和重用此模型</td> 
   <td style="background-color:#ffffff;">当我们有复杂的数据绑定时，调试过程会很复杂。</td> 
  </tr> 
  <tr> 
   <td style="background-color:#f9f9f9;">MVC 模型组件可以独立于用户进行测试</td> 
   <td style="background-color:#f9f9f9;">易于进行单独的单元测试，并且代码是事件驱动的。</td> 
  </tr> 
 </tbody> 
</table>

### MVC的优点 ###

这里，是 MVC 的优点/优点

*  更轻松地支持新型客户端
 *  各种组件的开发可以并行执行。
 *  它通过将应用程序划分为单独的 (MVC) 单元来避免复杂性
 *  它仅使用前端控制器模式，该模式使用单个控制器处理 Web 应用程序请求。
 *  为测试驱动开发提供最佳支持
 *  它适用于 Web 应用程序，这些应用程序由大型 Web 设计人员和开发人员团队提供支持。
 *  它提供了一个清晰的关注点分离（SoC）。
 *  所有类和对象都是相互独立的，因此您可以单独测试它们。
 *  MVC 允许对控制器上的相关操作进行逻辑分组。

### MVVM 的优点 ###

在这里，是 MVVM 的优点/优点

*  业务逻辑与 Ul 解耦
 *  易于维护和测试
 *  易于重用的组件
 *  松耦合架构：MVVM 使您的应用程序架构成为松耦合的。
 *  您可以为视图模型和模型层编写单元测试用例，而无需引用“视图”。

### MVC的缺点 ###

这里，是 MVC 的缺点/缺点

*  业务逻辑与Ul混合
 *  难以重用和实施测试
 *  没有正式的验证支持
 *  数据的复杂性和低效性增加
 *  将 MVC 与现代用户界面一起使用的困难
 *  需要多个程序员进行并行编程。
 *  需要多种技术的知识。

### MVVM 的缺点 ###

在这里，是 MVVM 的缺点/缺点

*  维护控制器中的大量代码
 *  有些人认为对于 MVVM 架构的简单 UI 来说可能是矫枉过正。
 *  不提供视图和视图模型之间的紧密耦合

[c1ac8763124d849642b799c6bceb2d89.png]: https://img-blog.csdnimg.cn/img_convert/c1ac8763124d849642b799c6bceb2d89.png
[0ff7cb13e52361c82cd7e950e1a97eba.png]: https://img-blog.csdnimg.cn/img_convert/0ff7cb13e52361c82cd7e950e1a97eba.png
[WPF]: https://www.guru99.com/sap-bods-tutorial.html
[538bc8d814f81aeef299dc7d4e30b9ed.png]: https://img-blog.csdnimg.cn/img_convert/538bc8d814f81aeef299dc7d4e30b9ed.png