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

news2024/9/22 8:59:57

区别:

  • mvc表示“模型-视图-控制器”,
  • mvp表示“模型-视图-演示者”,
  • mvvm表示“模型-视图-视图模型”;
    mvpmvvm都是由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,反之亦然。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2154704.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何使用智能代码编辑器改变编程体验

你是否曾经在深夜加班时,望着屏幕上密密麻麻的代码,感到无比疲惫?或者在处理复杂项目时,被繁琐的代码管理和调试过程折磨得头痛不已?如果是这样,那么你可能还没有发现编程世界中的一个秘密武器——智能代码…

《关键跃升》读书笔记10

发展靠规划 执⾏靠闭环,提⾼靠循环,其实讲的是短期和中期的事。短期内完成 任务靠闭环,经理有⽆数需要执⾏的事在⼿边,要靠闭环,不能有漏 洞,不能出现不了了之的情况;中期的团队成⻓靠循环&…

go 读取excel数据存储到mysql

一、安装依赖 go get github.com/go-sql-driver/mysql go get github.com/jmoiron/sqlx 二、main.go package mainimport ("fmt""github.com/jmoiron/sqlx""log" ) import "github.com/tealeg/xlsx" import _ "github.com/go-s…

并查集(上)

并查集简要介绍: 我们先讲并查集的一般使用场景,之后再讲并查集的具体细节以及原理。 并查集的使用一般是如下的场景: 一开始每个元素都拥有自己的集合,在自己的集合里只有这个元素自己。 f i n d ( i ) find(i) find(i)&#…

使命召唤游戏助手系统小程序的设计

管理员账户功能包括:系统首页,个人中心,玩家管理,游戏分类管理,道具种类管理,游戏道具处管理,战绩信息管理,水平评估管理,系统管理 微信端账号功能包括:系统…

心觉:感恩何其重要,感恩之心如何培养

Hi,我是心觉,与你一起玩转潜意识、脑波音乐和吸引力法则,轻松掌控自己的人生! 挑战每日一省写作177/1000天 上篇文章我们讲了保持感恩之心,可以吸引更多的机会和财富 但是现实中很多人是缺乏感恩之心 这是由于他们…

Python画笔案例-057 绘制蜘蛛网

1、绘制蜘蛛网 通过 python 的turtle 库绘制 蜘蛛网,如下图: 2、实现代码 绘制蜘蛛网,以下为实现代码: """蜘蛛网.py """ import turtledef draw_circle(pos,r):"""pos:圆的中心点…

嘉立创新建元件并快速使用导入的AD封装,快速建立一个新元件

尝试的原因 在网上买了三块很新的蓝牙,这个导致没有封装,幸好商家给了封装图和别的电路资料,自己画了一个封装,虽然不是很难,但也是很费时间,需要查看数据和修改引脚位置等,所以尝试使用商家给…

7-51 7-52 两个有序链表序列并集 和 交集

7-51代码&#xff1a;&#xff08;map) #include<iostream> #include<map> using namespace std; map<int,int>mp; int cnt,cnttp; void scan(){while(1){int x; scanf("%d",&x);if(x-1) break;mp[x];cnt;} } int main(){scan();scan();if(!…

SwiftUI里的ForEach使用的注意事项

在用Swift编程语言的SwiftUI包设计苹果设备的程序时&#xff0c;经常会用到ForEach函数。这个函数的作用是将一个数据集里面的内容一条一条地取出&#xff0c;罗列在程序的页面上&#xff0c;使用方式的详解见[1]。 但ForEach和一般的循环不同之处在于它要求输入里面的数据集里…

了解云容器实例云容器实例(Cloud Container Instance)

1.什么是云容器实例&#xff1f; 云容器实例&#xff08;Cloud Container Instance&#xff0c; CCI&#xff09;服务提供 Serverless Container&#xff08;无服务器容器&#xff09;引擎&#xff0c;让您无需创建和管理服务器集群即可直接运行容器。 Serverless是一种架构理念…

【WEB】序列一下

1、 2、反序列化 <?phpclass Polar{public $url polarctf.com;public $ltsystem;public $bls /;function __destruct(){$a $this->lt;$a($this->b);} }$a new Polar(); echo serialize($a); ?>###O:5:"Polar":3:{s:3:"url";s:12:"…

山体滑坡检测系统源码分享

山体滑坡检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vis…

【成品论文】2024年华为杯研赛E题25页高质量成品论文(后续会更新

您的点赞收藏是我继续更新的最大动力&#xff01; 一定要点击如下的卡片链接&#xff0c;那是获取资料的入口&#xff01; 点击链接加入【2024华为杯研赛资料汇总】&#xff1a;https://qm.qq.com/q/Mxv2XNWxUc https://qm.qq.com/q/Mxv2XNWxUc 高速公路应急车道紧急启用模型…

OpenGL使用Glfw框架创建第一个窗体

code #include <iostream> /* glad必须先包含&#xff0c;后包含glfw */ #include "glad/glad.h" #include "glfw/glfw3.h"int main() {// 1 初始化GLFW基本环境glfwInit();// 1.1设置OpenGL主版本、次版本glfwWindowHint(GLFW_CONTEXT_VERSION_MAJ…

C++入门基础知识79(实例)——实例 4【求商及余数】

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///C爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于C 实例 【求商及余数】相关内容&#xf…

基于 Qwen2-1.5B Lora 微调训练医疗问答任务

一、Qwen2 Lora 微调 Qwen是阿里巴巴集团Qwen团队研发的大语言模型和大型多模态模型系列。Qwen2 是 Qwen1.5 的重大升级。无论是语言模型还是多模态模型&#xff0c;均在大规模多语言和多模态数据上进行预训练&#xff0c;并通过高质量数据进行后期微调以贴近人类偏好。Qwen具…

Redisson分布式锁分析,可重入、可续锁(看门狗)

前言 在此说明&#xff0c;本文章不只是讲一些抽象的概念&#xff0c;而是可落地的&#xff0c;在日常工作中基本上进行修改一下便可以使用。书接上回&#xff0c;上篇自研分布式锁的文章使用是一个自己手写的一个分布式锁&#xff0c;按照JUC里面java.util.concurrent.locks.L…

Linux根文件系统构建

直接参考【正点原子】I.MX6U嵌入式Linux驱动开发指南V1.81 本文仅作为个人笔记使用&#xff0c;方便进一步记录自己的实践总结。 Linux“三巨头”已经完成了 2 个了&#xff0c;就剩最后一个 rootfs(根文件系统)了&#xff0c;本章我们就来学习一下根文件系统的组成以及如何构建…

苹果叶片病理分类数据集

苹果叶片病理分类数据集&#xff0c;数据集包括&#xff08;a&#xff09;健康叶片; (b) 苹果链格孢叶斑病&#xff1b; (c) 褐斑病&#xff1b; (d) 蛙叶斑病&#xff1b; (e) 灰斑&#xff1b; (f) 苹果花叶病&#xff1b; (g) 白粉病&#xff1b; (h) 叶片锈病&#xff1b; …