当前位置: 首页 > 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;每个基因是…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...