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

区别：

• mvc表示“模型-视图-控制器”，
• mvp表示“模型-视图-演示者”，
• mvvm表示“模型-视图-视图模型”；
  mvp、mvvm都是由mvc衍生出的。mvc中，view会直接从model中读取数据；mvp中，view并不直接使用model。

一、MVC模式优缺点

• MVC是比较直观的架构模式，最初生根于服务器端的Web开发，后来渐渐能够胜任客户端Web开发，能够满足其复杂性和丰富性。
  
• MVC模式将应用程序划分为三个部分：

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

• MVC特点：

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

用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）：
1、View 传送指令到 Controller ；
2、Controller 完成业务逻辑后，要求 Model 改变状态 ；
3、Model 将新的数据发送到 View，用户得到反馈。

• React与传统MVC的关系
  轻量级的视图层库！A JavaScript library for building user interfaces

React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；React 构建页面 UI 的库。可以简单地理解为：React 将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。

• React的特性
  声明式设计-React采用声明范式，可以轻松描述应用。

如果从后端拿回数据，按照react规则写好模板(不用自己判断、创建for循环、生成元素插入指定节点)，react自己实现渲染，后端传来的数据改变react自己更新。

• 高效-React通过对DOM的模拟(虚拟dom)，最大限度地减少与DOM的交互。

• 虚拟dom最大限度减少对dom的操作

• 灵活-React可以与已知的库或框架很好地配合。

• 可以与好看的ui框架，快速完成大型项目开发

• JSX- JSX是 JavaScript语法的扩展。

• JSX- JSX可以解析html、js、css

• 组件-通过React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

• 组件复用，例如轮播

单向响应的数据流–React实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。总结如下:

二、MVP模式优缺点

• MVP是把MVC中的Controller换成了Presenter（呈现），目的就是为了完全切断View跟Model之间的联系，由Presenter充当桥梁，做到View-Model之间通信的完全隔离方向。

• MVP特点：

●　M、V、P之间双向通信。
●　View 与 Model之间不通信，都通过 Presenter 传递。Presenter完全把Model和View进行了分离，主要的程序逻辑在Presenter里实现。
●　View 非常薄，不部署任何业务逻辑，称为”被动视图”（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。
●　Presenter与具体的View是没有直接关联的，而是通过定义好的接口进行交互，从而使得在变更View时候可以保持Presenter的不变，这样就可以重用。不仅如此，还可以编写测试用的View，模拟用户的各种操作，从而实现对Presenter的测试–从而不需要使用自动化的测试工具。

三、MVVM（Model-View-ViewModel）

• MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。

• 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，反之亦然。

原文地址：https://blog.csdn.net/qq_27702739/article/details/142413886

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！