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自定义按钮点击变颜色实现(多选功能)
实现效果图: 默认选中第一个按钮,未选中按钮为粉色,点击时颜色变为红色 利用动态类名,当定义isChange数值和下标index相同时,赋予act类名,实现变色效果 <template><div class"page"&…...

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

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

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

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

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

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

已经30了,5年多,只会功能测试的怎么办?
🍅 视频学习:文末有免费的配套视频可观看 🍅 关注公众号【互联网杂货铺】,回复 1 ,免费获取软件测试全套资料,资料在手,涨薪更快 这两天一直在和网易的朋友聊软件测试的发展,这一行的…...

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

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

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

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

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

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

Vue以弹窗形式实现导入功能
目录 前言正文 前言 由于个人工作原因,偏全栈,对于前端的总结还有些初出茅庐,后续会进行规整化的总结 对应的前端框架由:【vue】avue-crud表单属性配置(表格以及列) 最终实现的表单样式如下:…...

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

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

JavaScript 中JSON 字符串和对象之间的转换。
JSON.stringify() 方法(对象转换为 JSON 字符串) 用于将 JavaScript 对象转换为 JSON 字符串。 它接受一个 JavaScript 对象作为参数,并返回对应的 JSON 字符串表示。例如: 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…...

Linux文件系统与设备文件
Linux文件系统与设备文件 文章目录 Linux文件系统与设备文件Linux文件操作文件操作系统调用C库文件操作 Linux文件系统Linux文件系统目录结构Linux文件系统与设备驱动file结构体inode结构体file结构体和inode结构体的区别 devfsudev用户空间设备管理sysfs文件系统与Linux设备模…...

QT的绘图系统QPainterDevice与文件系统QIODevice
QT的绘图系统(QPainterDevice)与文件系统(QIODevice) 文章目录 1、Qt 的绘图系统1、QPainter的使用2、QPen(画笔)及QBursh(画刷)3、手动更新窗口4、绘图设备1、四种绘图设备的 区别2、 QBitmap3…...

Spark流式读取文件数据
流式读取文件数据 from pyspark.sql import SparkSession ss SparkSession.builder.getOrCreate() # todo 注意1:流式读取目录下的文件 --》一定一定要是目录,不是具体的文件,# 目录下产生新文件会进行读取# todo 注意点2࿱…...

Leetcode 3011. Find if Array Can Be Sorted
Leetcode 3011. Find if Array Can Be Sorted 1. 解题思路2. 代码实现 题目链接:3011. Find if Array Can Be Sorted 1. 解题思路 这一题挺简单的,就是一个分组进行排序考察,我们将相邻且bit set相同的元素划归到同一组,然后进…...

Databend 开源周报第 129 期
Databend 是一款现代云数仓。专为弹性和高效设计,为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务:https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展,遇到更贴近你心意的 Databend 。 支持标准流 标…...

python 正则表达式学习(1)
正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配。 1. 特殊符号 1.1 符号含义 模式描述^匹配字符串的开头$匹配字符串的末尾.匹配任意字符,除了换行符,当re.DOTALL标记被指定时,则可以匹配包…...

安全防御-基础认知
目录 安全风险能见度不足: 常见的网络安全术语 : 常见安全风险 网络的基本攻击模式: 病毒分类: 病毒的特征: 常见病毒: 信息安全的五要素: 信息安全的五要素案例 网络空间:…...

各省税收收入、个人和企业所得税数据,Shp、excel格式,2000-2021年
基本信息. 数据名称: 各省税收收入、个人和企业所得税数据 数据格式: Shp、excel 数据时间: 2000-2021年 数据几何类型: 面 数据坐标系: WGS84 数据来源:网络公开数据 数据字段: 序号字段名称字段说明1sssr_2021税收收入(亿元&am…...

Vue记录
vue2、vue3记录,参考地址:尚硅谷Vue项目实战硅谷甄选,vue3项目TypeScript前端项目一套通关_哔哩哔哩_bilibili vue2记录 经典vue2结构 index.vue: <template><div>...</div> </template><script>…...

【JavaEE进阶】 Spring Boot⽇志
文章目录 🎋关于日志🚩为什么要学习⽇志🚩⽇志的⽤途🚩日志的简单使用 🎄打印⽇志🚩程序中得到⽇志对象🚩使⽤⽇志对象打印⽇志 🎍⽇志格式的说明🚩⽇志级别的作用&#…...