MVC、MVP和MVVM三种设计模式之间的区别是什么

MVC、MVP和MVVM三种设计模式之间的区别是什么

引用

CSDN

1.

https://m.blog.csdn.net/qq_27702739/article/details/142413886

MVC、MVP和MVVM是三种常见的软件设计模式，它们在现代Web开发中扮演着重要角色。本文将详细介绍这三种设计模式的区别、优缺点以及它们在实际开发中的应用。

MVC模式

MVC（Model-View-Controller）模式是最直观的架构模式之一，最初在服务器端的Web开发中广泛应用，后来逐渐扩展到客户端Web开发领域。

MVC模式结构

MVC模式将应用程序划分为三个主要部分：

• Model（模型）：封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。
• View（视图）：负责渲染页面，展示数据。
• Controller（控制器）：作为M和V之间的连接器，控制应用程序的流程和页面的业务逻辑。

MVC模式特点

MVC模式的核心特点是实现关注点分离，即应用程序中的数据模型与业务和展示逻辑解耦。在客户端Web开发中，就是将模型（M-数据、操作数据）、视图（V-显示数据的HTML元素）之间实现代码分离，松散耦合，使之成为一个更容易开发、维护和测试的客户端应用程序。

MVC工作流程

1. 用户操作 -> View（负责接收用户的输入操作）
2. View 传送指令到 Controller
3. Controller 完成业务逻辑后，要求 Model 改变状态
4. Model 将新的数据发送到 View，用户得到反馈

React与MVC的关系

React是一个轻量级的视图层库，主要用于构建用户界面。React并不是一个完整的MVC框架，最多可以认为是MVC中的V（View）。React通过组件化的方式构建页面UI，将界面分成了各个独立的小块，这些组件之间可以组合、嵌套，从而构成完整的页面。

React的主要特性包括：

• 声明式设计：React采用声明范式，可以轻松描述应用。如果从后端拿回数据，按照React规则写好模板，React会自动实现渲染和数据更新。
• 高效：React通过对DOM的模拟（虚拟DOM），最大限度地减少与DOM的交互。
• 灵活：React可以与已知的库或框架很好地配合，可以与好看的UI框架快速完成大型项目开发。
• JSX：JSX是JavaScript语法的扩展，可以解析HTML、JS、CSS。
• 组件：通过React构建组件，使得代码更加容易得到复用，能够很好地应用在大项目的开发中。
• 单向响应的数据流：React实现了单向响应的数据流，从而减少了重复代码。

MVP模式

MVP（Model-View-Presenter）模式是对MVC模式的改进，主要目的是完全切断View和Model之间的联系，由Presenter充当桥梁，实现View-Model之间通信的完全隔离。

MVP模式特点

• M、V、P之间双向通信。
• View与Model之间不通信，都通过Presenter传递。
• View非常薄，不部署任何业务逻辑，称为“被动视图”（Passive View）。
• Presenter与具体的View没有直接关联，而是通过定义好的接口进行交互，便于重用和测试。

MVVM模式

MVVM（Model-View-ViewModel）模式是对MVP模式的进一步发展，核心思想是“数据模型数据双向绑定”。在MVVM模式中，View和Model之间的交互是通过ViewModel进行的，而且Model和ViewModel之间的交互是双向的。

MVVM模式特点

• ViewModel完全取代了Presenter的角色。
• View和Model之间的交互是通过ViewModel进行的。
• 数据绑定是双向的，即View的数据变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。

Vue框架就是基于MVVM模式设计的，Vue官网明确指出其借鉴了MVVM模式，但并非完全意义上的MVVM模式。Vue实例中的MVVM体现如下：

总结

• 在MVC中，View会直接从Model中读取数据而不是通过Controller；View和Controller之间存在多对一关系。
• 在MVP中，View并不直接使用Model，它们之间的通信是通过Presenter (MVC中的Controller)来进行的，所有的交互都发生在Presenter内部；View和Presenter之间是一对一关系。
• MVVM模式基本上与MVP模式完全一致，唯一的区别是：MVVM采用双向绑定（data-binding）：View的变动，自动反映在ViewModel，反之亦然。