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

MVC与MVVM模式的区别

一、MVC

Model(模型):用于处理应用程序数据逻辑,负责在数据库中存取数据。处理数据的crud

View(视图):处理数据显示的部分。通常视图是依据模型数据创建的。

Controller(控制器):处理数据显示的部分,控制器负责从视图读取数据,控制用户输入,并将数据发送给模型。一般包括业务处理模块和router路由模块

 

二、  M VVM——视图模型双向绑定

Model:模型层:用于处理业务逻辑和与服务器端进行交互

View:视图层:用于将数据模型转化为UI展示出来,简单来说就是html页面

ViewModel:视图模型层:框架封装的核心,它负责将数据与视图关联起来

  • Model 和 View 并无直接关联,而是通过 ViewModel 来进行交互的(即双向数据绑定),
  • Model 和 ViewModel之间有着双向数据绑定的联系

 三、区别

MVVM 与 MVC 最大的区别就是:

MVVM实现了View和Model的自动同步,当Model属性改变时,不用手动操作Dom元素去改变View的显示。而改变属性后,该属性对应View的显示会自动改变

四、延伸:

 阐述一下你所理解的MVVM响应式原理

  • vue是采用数据劫持配合发布者-订阅者的模式的方式,
    • 通过Object.defineProperty()来劫持各个属性的getter和setter
    • 在数据变动时,发布消息给依赖收集器(dep中的subs),去通知(notify)观察者,做出对应的回调函数,更新视图
  • MVVM作为绑定的入口,整合Observer,Compile和Watcher三者,
    • 通过Observer来监听model数据变化,
    • 通过Compile来解析编译模板指令,
    • 最终利用Watcher搭起Observer,Compile之间的通信桥路,
    • 达到数据变化Observer)=>视图更新视图交互变化=>数据model变更的双向绑定效果。

 

 参考:https://juejin.cn/post/7110885291946147876

相关文章:

MVC与MVVM模式的区别

一、MVC Model(模型):用于处理应用程序数据逻辑,负责在数据库中存取数据。处理数据的crud View(视图):处理数据显示的部分。通常视图是依据模型数据创建的。 Controller(控制器&…...

【数据结构与算法】归并排序

归并排序 归并排序(MERGE-SORT)是利用归并的思想实现的排序方法,该算法采用经典的分治(divide-and-conquer)策略(分治法将问题分(divide)成一些小的问题然后递归求解,而…...

OSG3.6.5 + VS2017前期准备及编译

OSG3.6.5 VS2017前期准备及编译 1、前期准备 1.1、osg稳定版本源码 Stable releases (openscenegraph.com) 1.2、osg依赖项 Dependencies (openscenegraph.com) 1.3、osg测试及演示数据 Data Resources (openscenegraph.com) 1.4、安装doxygen和Graphviz(用…...

IPv6 over IPv4隧道配置举例

配置IPv6 over IPv4手动隧道示例 组网需求 如图1所示,两台IPv6主机分别通过SwitchA和SwitchC与IPv4骨干网络连接,客户希望两台IPv6主机能通过IPv4骨干网互通。 图1 配置IPv6 over IPv4手动隧道组网图 配置思路 配置IPv6 over IPv4手动隧道的思路如下&…...

【GitOps系列】使用 ArgoCD 快速打造GitOps工作流

文章目录 ArgoCD简介ArgoCD安装访问ArgoCDGitOps 工作流总览创建 ArgoCD 应用检查 ArgoCD 同步状态访问应用 连接 GitOps 工作流体验 GitOps 工作流生产建议1)修改默认密码2)配置 Ingress 和 TLS3)使用 Webhook 触发 ArgoCD4)将源…...

C#|无法打开cs文件设计窗口

报错信息:To prevent possible data loss before loading the designer, the following errors must be resolved: 解决方案:实不相瞒我把项目解决方案名称改短了就可以了。。有其他原因或者解决方案望不吝赐教。。...

【SpringBoot笔记36】SpringBoot自定义WebSocketHandler集成WebSocket

这篇文章,主要介绍SpringBoot自定义WebSocketHandler集成WebSocket。 目录 一、SpringBoot集成WebSocket 1.1、添加WebSocket依赖 1.2、自定义WebSocketHandler 1.3、注册WebSocket服务端...

flutter 图片相关

官方链接:https://api.flutter.dev/flutter/widgets/Image-class.html 图片基本使用 显示本地图片时,要在pubspec.yaml文件里面添加如:(注意空格) assets: - assets/images/logo.png Fit属性: BoxFit.cover最常用 显示可能拉伸,可能裁…...

将上位机程序从PC的window系统迁移至Intel NUC的无桌面版ubuntu系统问题记录

将上位机程序从PC的window系统迁移至Intel NUC的无桌面版ubuntu系统 问题一 网口失效 问题描述:NUC关机状态下,将网口与路由器连接,网络指示灯闪烁;NUC开机后,网络指示灯熄灭,使用ping命令,既…...

CHI中的error处理

Error Handling Error types 包含两种sub-packet级别的error, 和两种packe级别的error; Packet level error Data Error, DERR □ 访问的地址是正确的,但是访问的数据有错误;通常是在数据崩溃的时候使用,例如ECC&#xf…...

如何使用 PHP 进行数据库缓存处理?

当你想要让你的PHP应用程序更快时,数据库缓存是一个重要的工具。它可以帮助你避免频繁地查询数据库,提高应用程序的响应速度。不过,在进行数据库缓存处理时,需要注意一些细节,否则可能会得到相反的结果。下面&#xff…...

新版巨量广告投放技巧分析

新版广告系统,计划出价40,转化成本特别低只有21,同时消耗也比较慢 为什么刚开始成本都比较低,跑着跑着成本就高了,像这种情况一般如何操作? 一: 为什么会出现成本和出价差这么多 1: 系统对账…...

Vue3 导出excel

🙂博主:锅盖哒 🙂文章核心:导出excel 目录 首先,你需要安装xlsx库。可以使用npm或yarn来安装: 在Vue组件中,你可以使用xlsx库来生成Excel文件并提供一个导出按钮供用户下载。 在Vue 3中&…...

vue 使用vue-json-viewer 展示 JSON 格式的数据

npm install vue-json-viewer --save<el-button type"primary" click"previewClick">预览</el-button><el-dialog title"预览" :visible.sync"previewVisible" width"70%"><viewer ref"viewer&qu…...

14.python设计模式【模板方法模式】

内容&#xff1a;定义一个操作中的算法的骨架&#xff0c;而将一些步骤延迟到子类中。模板方法使得子类可以不改变一个算法的结构即可重定义该算法某特定步骤。 角色&#xff1a; 抽象类&#xff08;AbstractClass&#xff09;&#xff1a;定义抽象的原子操作&#xff08;钩子…...

谷粒商城第六天-实现功能的前序工作(网关的配置 跨域配置)

目录 一、为什么要做这项工作 1.1 为什么要配置网关 1.2 为什么要使用网关统一配置跨域 二、网关配置 三、统一跨域配置 四、总结 一、为什么要做这项工作 1.1 为什么要配置网关 我们知道网关的作用其实主要就是进行路由的&#xff0c;也就是根据前端发送到网关的请求&…...

为什么说国内数字孪生平台gis架构采用Cesium是不错的选择?

Gis作为数字孪生平台开发中重要的一环对数字孪生平台是否好用是一个重要的判定方式&#xff0c;国内数字孪生软件在融合GIS系统方面采取了多种方式&#xff0c;例如Unity或Unreal Engine等游戏引擎&#xff0c;以增强数字孪生的空间感知和空间分析能力&#xff0c;提供更全面、…...

前端面试的性能优化部分(1)每篇10题

1. 懒加载的概念 懒加载&#xff08;Lazy Loading&#xff09;是一种优化技术&#xff0c;它用于延迟加载页面资源&#xff0c;只在需要时才加载特定的内容&#xff0c;而不是在页面初始加载时一次性加载所有资源。懒加载的目的是提高页面加载速度和性能&#xff0c;尤其对于单…...

GitLab备份升级

数据备份(默认的备份目录在/var/opt/gitlab/backups/下&#xff0c;生成一个以时间节点命名的tar包。) gitlab-rake gitlab:backup:create新建repo源&#xff0c;升级新版本的gitlab vim /etc/yum.repos.d/gitlab-ce.repo [gitlab-ce] namegitlab-ce baseurlhttps://mirrors.…...

Matlab实现遗传算法仿真(附上40个仿真源码)

遗传算法&#xff08;Genetic Algorithm&#xff0c;GA&#xff09;是一种基于生物进化理论的优化算法&#xff0c;通过模拟自然界中的遗传过程&#xff0c;来寻找最优解。 在遗传算法中&#xff0c;每个解被称为个体&#xff0c;每个个体由一组基因表示&#xff0c;每个基因是…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

Java毕业设计:WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...