当前位置: 首页 > news >正文

MVC和MVVM区别和VUE关系

MVC(Model-View-Controller)和 MVVM(Model-View-ViewModel)是两种常见的前端架构模式,它们的主要区别在于处理业务逻辑和数据操作的方式。

MVC中,View(视图)可以直接访问Model(模型),而Controller(控制器)主要负责收集数据,并将数据从Model传递给View来完成交互。在MVC中,Controller承担了大量的责任,随着项目复杂度的增加,Controller中的代码可能会变得过于庞大和复杂,不利于维护。

相比之下,MVVM在处理业务逻辑和数据操作上更加灵活。ViewModel是一个同步Model和View的对象,Model和View之间没有直接的联系,而是通过ViewModel来实现交互。在MVVM架构下,Model和View的同步是通过双向绑定实现的,这意味着View的数据会同步到Model上,Model的数据变化也会即时显示在View上。这种自动同步的特性使得MVVM能够解决MVC中的大量DOM操作导致页面渲染速度降低、加载速度过慢等问题。

总的来说,MVC和MVVM都是为了实现Web系统的职能分工,但MVVM通过将数据绑定工作放到一个JS里去实现,解决了MVC中Controller承担过多责任的问题,使代码更易于维护。此外,MVVM通过双向绑定实现了Model和View的自动同步,提高了页面渲染速度和用户体验。

MVVM 新增了 VM 类
ViewModel 层:做了两件事达到了数据的双向绑定⼀是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页⾯。实现的⽅式是:数据绑定。⼆是将【视图】转化成【模型】,即将所看到的页⾯转化成后端的数据。实现的⽅式是:DOM 事件监听。MVVM 与 MVC 最⼤的区别就是:它实现了 View 和 Model 的⾃动同步,也就是当 Model 的属性改变时,我们不⽤再⾃⼰⼿动操作 Dom 元素,来改变 View 的显⽰,⽽是改变属性后该属性对应 View 层显⽰会⾃动改变(对应Vue数据驱动的思想)
整体看来,MVVM ⽐ MVC 精简很多,不仅简化了业务与界⾯的依赖,还解决了数据频繁更新的问题,不⽤再⽤选择器操作 DOM 元素。因为在 MVVM 中,View 不知道 Model 的存在,Model 和 ViewModel 也观察不到 View,这种低耦合模式提⾼代码的可重⽤性
注意:Vue 并没有完全遵循 MVVM 的思想这⼀点官⽹⾃⼰也有说明
那么问题来了为什么官⽅要说 Vue 没有完全遵循 MVVM 思想呢?
严格的 MVVM 要求 View 不能和 Model 直接通信,⽽ Vue 提供了$refs 这个属性,让 Model 可以直接操作 View,违反了
这⼀规定,所以说 Vue 没有完全遵循 MVVM。

相关文章:

MVC和MVVM区别和VUE关系

MVC(Model-View-Controller)和 MVVM(Model-View-ViewModel)是两种常见的前端架构模式,它们的主要区别在于处理业务逻辑和数据操作的方式。 MVC中,View(视图)可以直接访问Model&…...

vue3自定义按钮点击变颜色实现(多选功能)

实现效果图&#xff1a; 默认选中第一个按钮&#xff0c;未选中按钮为粉色&#xff0c;点击时颜色变为红色 利用动态类名&#xff0c;当定义isChange数值和下标index相同时&#xff0c;赋予act类名&#xff0c;实现变色效果 <template><div class"page"&…...

Redis的key过期策略是怎么实现的

这是一道经典的Redis面试题&#xff0c;一个Redis中可能存在很多很多的key&#xff0c;这些key中可能有很大一部分都有过期时间&#xff0c;此时Redis服务器咋知道哪些key已经过期&#xff0c;哪些还没过期呢&#xff1f; 如果直接遍历所有的key&#xff0c;这显然是行不通的&…...

vue+elenemt分页+springboot

目录 1、编写模板 2、发请求调接口 3、后端返回数据 1.编写实体类 2、UserController 3、Userservice接口 4、&#xff08;mapper接口&#xff09;UserMapper 5、xml 1、编写模板 <!-- 搜素框 --><el-input placeholder"请输入姓名" v-model"ke…...

C++ :命名空间域

目录 冲突与命名&#xff1a; 举个例子&#xff1a; 全局与局部&#xff1a; 域作用限定符&#xff1a; 命名空间域&#xff1a; 冲突与命名&#xff1a; 在C语言中&#xff0c;我们通常会使用stdlib.h 而stdlib.h 本质上是一个函数的库&#xff0c;在程序中使用的大多数…...

提升网站关键词排名的工具

随着互联网的蓬勃发展&#xff0c;网站的关键词排名成为衡量网站流量和曝光度的重要指标。在这个竞争激烈的数字时代&#xff0c;站在搜索引擎结果的前列变得至关重要。为了实现这一目标&#xff0c;合理利用关键词排名优化工具是必不可少的。本文将重点介绍147SEO软件&#xf…...

ICMP控制消息 汇总

控制消息由 类型 字段中的值标识。代码 字段给出了消息的附加上下文信息。自协议首次引入以来&#xff0c;一些控制消息已被弃用。 重要的ICMP Control Message控制信息 类型码状态描述0 –回声回复&#xff1a;140回声回复&#xff08;用于ping&#xff09;1和2未分配已预留3 …...

C#,入门教程(22)——函数的基础知识

上一篇&#xff1a; C#&#xff0c;入门教程(21)——命名空间&#xff08;namespace&#xff09;与程序结构的基础知识https://blog.csdn.net/beijinghorn/article/details/124140653 一、函数的基本概念 一个软件的结构大体如下&#xff1a; 大厦application: a plaza { --…...

已经30了,5年多,只会功能测试的怎么办?

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 这两天一直在和网易的朋友聊软件测试的发展&#xff0c;这一行的…...

什么是UML?有什么用?

2、什么是UML?有什么用&#xff1f; UML 是 Unified Model Language的缩写&#xff0c;中文是统一建模语言&#xff0c;是由一整套图表组成的标准化建模语言。 UML 是一种统一建模语言&#xff0c;一种图标式语言&#xff08;画图的&#xff09; UML 不是只有 Java 中使用&…...

盘点好用内容合规监测工具

网页敏感内容监测 Web Purify 由 WebPurify 提供&#xff0c;这是一个专门从事内容审核和过滤服务的公司。 核心功能 ● 文本审核&#xff1a;加强脏话过滤&#xff0c;标记仇恨言论、偏执、性挑逗等 ● 图片审核&#xff1a;让个人资料照片、社交应用程序、产品定制远离令…...

CC工具箱使用指南:【查找锐角】

一、简介 在面要素中&#xff0c;尖锐角往往是有问题的地方。 在一系列空间分析后&#xff0c;通常会遗留下来部分尖锐角&#xff0c;需要手动处理。 但是人工去找出这些尖锐角又比较麻烦&#xff0c;这个工具的目的就是找出面要素边界的尖锐角。 二、工具参数介绍 右键点击…...

kafka消费相关问题(GPT回答版本)

kafka消费相关问题&#xff08;GPT回答版本&#xff09; 在Java中&#xff0c;要避免重复消费Kafka消息&#xff0c;可以使用以下方法 1. 使用消费者组&#xff1a; 在设置Kafka消费者时&#xff0c;可以指定一个消费者组。一个消费者组中可以有多个消费者实例&#xff0c;每…...

【C++】string的基本使用二

我们接着上一篇的迭代器说起&#xff0c;迭代器不只有正向的&#xff0c;还有反向的&#xff0c;就是我们下边的这两个 它的迭代器类型也是不同的 rbegin就是末尾&#xff0c;rend就是开头&#xff0c;这样我们想遍历一个string对象的话就可以这样做 int main() {string s1(…...

MATLAB解决考研数学一题型(上)

闲来无事&#xff0c;情感问题和考研结束后的戒断反应比较严重&#xff0c;最近没有什么写博文的动力&#xff0c;抽空来整理一下考研初试前一直想做的工作——整理一下MATLAB解决数学一各题型的命令~ 本贴的目录遵循同济版的高数目录~ 目录 一.函数与极限 1.计算双侧极限 2…...

Vue以弹窗形式实现导入功能

目录 前言正文 前言 由于个人工作原因&#xff0c;偏全栈&#xff0c;对于前端的总结还有些初出茅庐&#xff0c;后续会进行规整化的总结 对应的前端框架由&#xff1a;【vue】avue-crud表单属性配置&#xff08;表格以及列&#xff09; 最终实现的表单样式如下&#xff1a;…...

分布式锁原理及实现

目录 一、锁的使用场景 二、如何实现控制&#xff1f; 三、单台服务器使用锁的场景 四、分布式锁 五、Redis 实现分布式锁及存在问题 六、Redisson 实现分布式锁 七、定时任务&#xff0b;锁 一、锁的使用场景 1. 控制定时任务执行 定时任务多次执行浪费资源&#xff…...

蓝桥杯官网填空题(海盗与金币)

题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 12名海盗在一个小岛上发现了大量的金币&#xff0c;后统计一共有将近5万枚。 登上小岛是在夜里&#xff0c;天气又不好。由于各种原因&#xff0c;有的海盗偷拿了很…...

JavaScript 中JSON 字符串和对象之间的转换。

JSON.stringify() 方法&#xff08;对象转换为 JSON 字符串&#xff09; 用于将 JavaScript 对象转换为 JSON 字符串。 它接受一个 JavaScript 对象作为参数&#xff0c;并返回对应的 JSON 字符串表示。例如&#xff1a; const obj { name: John, age: 25 }; const jsonStr…...

All the stories begin at installation

Before installation, there are some key points about Conan: “Conan is a dependency and package manager for C and C languages.”“With full binary management, Conan can create and reuse any number of different binaries (for different configurations like a…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

宇树科技,改名了!

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

jdbc查询mysql数据库时,出现id顺序错误的情况

我在repository中的查询语句如下所示&#xff0c;即传入一个List<intager>的数据&#xff0c;返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致&#xff0c;会导致返回的id是从小到大排列的&#xff0c;但我不希望这样。 Query("SELECT NEW com…...

RushDB开源程序 是现代应用程序和 AI 的即时数据库。建立在 Neo4j 之上

一、软件介绍 文末提供程序和源码下载 RushDB 改变了您处理图形数据的方式 — 不需要 Schema&#xff0c;不需要复杂的查询&#xff0c;只需推送数据即可。 二、Key Features ✨ 主要特点 Instant Setup: Be productive in seconds, not days 即时设置 &#xff1a;在几秒钟…...