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

离散几何拓扑数论(终稿·全定义完整版一)

离散几何拓扑数论&#xff08;终稿全定义完整版&#xff09; 作者&#xff1a;乖乖数学 日期&#xff1a;2026 年 5 月 21 日 体系&#xff1a;离散几何拓扑数论&#xff08; Discrete Geometric Topological Number Theory&#xff09;...

从扁平到触手可及,Midjourney拟物化全流程拆解,含12组高复用材质参数模板与避坑清单

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;从扁平到触手可及&#xff1a;Midjourney拟物化设计范式跃迁 当UI设计从iOS 7的极简扁平风席卷全球&#xff0c;我们曾笃信“去装饰即高级”。而Midjourney V6起悄然掀起一场静默革命——它不再满足于生成“看…...

Python数据流式处理:Streaming深度解析与实战

Python数据流式处理&#xff1a;Streaming深度解析与实战 引言 在Python开发中&#xff0c;数据流式处理是处理大数据和实时数据的关键技术。作为一名从Rust转向Python的后端开发者&#xff0c;我深刻体会到流式处理在处理海量数据时的优势。Python提供了多种流式处理工具&…...

chatgpt-web-midjourney-proxy的Tauri桌面应用:跨平台AI客户端构建终极指南

chatgpt-web-midjourney-proxy的Tauri桌面应用&#xff1a;跨平台AI客户端构建终极指南 想要在本地轻松体验ChatGPT、Midjourney和GPTs的强大功能吗&#xff1f;chatgpt-web-midjourney-proxy项目的Tauri桌面应用为你提供了完美的解决方案&#xff01;这款跨平台AI客户端让AI助…...

86、【Agent】【OpenCode】bash 工具提示词(完结)

【声明】本博客所有内容均为个人业余时间创作&#xff0c;所述技术案例均来自公开开源项目&#xff08;如Github&#xff0c;Apache基金会&#xff09;&#xff0c;不涉及任何企业机密或未公开技术&#xff0c;如有侵权请联系删除 背景 上篇 blog 【Agent】【OpenCode】bash 工…...

ElevenLabs芬兰语TTS部署踩坑实录(含CI/CD流水线集成模板):1次失败=2.3小时调试,我们帮你省下87%时间

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;ElevenLabs芬兰语TTS部署踩坑实录&#xff08;含CI/CD流水线集成模板&#xff09;&#xff1a;1次失败2.3小时调试&#xff0c;我们帮你省下87%时间 核心痛点&#xff1a;芬兰语语音合成的隐性陷阱 ElevenLab…...

RabbitMQ(七大模式+微服务+自用)

一、前置准备安装并启动 RabbitMQ&#xff08;默认端口 5672&#xff09;JDK 8、Maven、IDEA所有项目通用工具类 通用 pom&#xff0c;直接复制二、全局统一配置&#xff08;所有项目必用&#xff09;1. 公共连接工具类 ConnectionUtil.javajava运行package com.mq.util;impor…...

外泌体检测推荐公司

外泌体检测推荐公司 核心优势&#xff1a;外泌体领域一站式技术龙头&#xff0c;搭建从外泌体提取、鉴定到分子检测的完整技术体系&#xff0c;可提供包括样本处理、分离纯化、表征分析、核酸 / 蛋白标志物检测等全链条科研服务&#xff0c;实验体系成熟、整合度高、交付顺畅。…...

MySQL 9.0安装教程:免费数据库软件,科研数据管理必备

做科研的朋友&#xff0c;应该都有这个经历。以前用Excel打开数据文件&#xff0c;几秒钟就出来了。现在呢&#xff1f;几十万行的数据表&#xff0c;打开转半天圈&#xff0c;筛选一下直接未响应。保存一次要等好久&#xff0c;生怕电脑死机。不是你的电脑不行&#xff0c;是数…...

二年级下册语文看图写话作文:长大以后做什么

二年级下册语文《长大以后做什么》看图写话&#xff0c;重点是&#xff1a;长大想做什么职业为什么想做以后会怎么努力老师最喜欢“有梦想 有原因 有行动”的内容。我用夸克网盘分享了「二年级下册语文作文」&#xff0c;链接&#xff1a;https://pan.quark.cn/s/3ee38f2d976…...