MVC和MVVM架构的区别

news2025/5/23 9:25:21

MVC和MVVM都是前端开发中常用的设计模式,都是为了解决前端开发中的复杂性而设计的,而MVVM模式则是一种基于MVC模式的新模式。

MVC(Model-View-Controller)的三个核心部分:模型、视图、控制器相较于MVVM(Model-View-ViewModel)的三个核心部分:模型、视图、视图模型的区别主要在于控制器和视图模型的区别,模型、视图几乎无差别。

在MVC模式中,视图与模型是通过控制器进行交互的,而在MVVM模式中,视图与视图模型之间是通过双向数据绑定进行交互的。拿flutter举个例子,MVC中View需要知道如何通过Controller来更新Model,并且必须手动调用setState()来刷新界面,MVVM通过数据绑定机制(如Provider),ViewModel的变化会自动反映到View上,减少了View对其他组件的直接依赖,实现了更加松散的耦合。

流程对比

MVC的流程

  • 用户交互:用户与View进行交互(如点击按钮)。

  • 调用Controller:View接收到用户的输入后,会直接调用相应的Controller方法。

  • 处理逻辑:Controller接收请求后,可能会操作Model(如更新数据),然后决定需要显示的数据。

  • 更新View:Controller可能通过返回值或直接调用View的方法通知View更新自身显示的内容。在某些实现中,View可能需要主动查询Model或Controller获取最新的数据状态。

  • 手动刷新UI:为了使UI反映出这些变化,通常需要在View中调用setState()(在Flutter中)或其他类似的方法来触发视图重绘。

MVVM的流程

  • 用户交互:用户与View交互(如点击按钮)。
  • 调用ViewModel方法:用户操作导致View调用ViewModel中的方法(例如,增加计数器的值)。
  • 处理逻辑并通知:ViewModel执行业务逻辑,并在数据发生变化时调用notifyListeners()(或类似的机制)。这一步骤不需要直接与View交互,它只是简单地通知其状态发生了变化。
  • 自动更新View:由于使用了数据绑定,当ViewModel的状态改变时,所有监听该状态的View都会自动更新,无需额外的手动干预。这意味着一旦ViewModel中的数据发生变化,界面就会自动反映这些变化,而不需要显式地调用setState()。

尽管两者都需要实例化Controller或ViewModel,但它们在流程和交互方式上有着本质的区别:

  • MVC更侧重于通过控制器作为中介来协调模型和视图之间的交互,要求视图主动查询或等待控制器的通知来进行更新。
  • MVVM利用数据绑定机制,使得视图能够自动响应ViewModel的变化,降低了视图与逻辑层之间的耦合度,简化了状态管理,提高了代码的可维护性和测试性。

总结:个人觉得就是数据绑定的区别,还有就是MVC中Controller充当中介让M和V通信,MVVM中相当于把双方的都拿来只让M或V与VM交互,不让M、V直接交互(MVVVM模式有着严格的规定,即View层与Model层不得直接进行通信)。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2383785.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

RAG(Retrieval-Augmented-Generation)检索增强生成

什么是RAG(检索增强生成)? RAG是一种AI框架,结合传统的数据检索技术和LLM(大语言模型)的优势,通过将外部数据和LLM生成语言技能集合,对LLM的输出进行优化,使输出更准确、…

黑马点评前端Nginx启动失败问题解决记录

Nginx启动失败问题解决记录 问题描述 在学习黑马Redis课程时,启动黑马点评Nginx前端项目发现: 无法访问8080端口检查Windows端口占用情况(无占用)结论:Nginx服务未成功启动 错误日志分析 在nginx安装目录下的logs…

第12天-Python+Qt5开发实战:10大经典案例与深度解析

1. 基础窗口与信号槽机制 python 复制 下载 import sys from PyQt5.QtWidgets import QApplication, QMainWindow, QPushButtonclass MainWindow(QMainWindow):def __init__(self):super().__init__()self.setWindowTitle("信号槽示例")btn = QPushButton("…

人工智能培训:解锁未来职场竞争力的核心路径与课程内容解析

当AI绘画工具在几秒内生成一幅媲美专业画师的作品,当AI程序员自主优化代码逻辑,当AI客服精准解答复杂问题——一个现实愈发清晰:人工智能正在重新定义“专业能力”的边界。 对于普通人而言,这场变革既带来焦虑,也孕育机…

深入解析Java泛型:从定义到实战应用

目录 🚀前言🤔泛型的定义🐧泛型类🌟泛型接口✍️泛型方法、通配符、上下限💯泛型方法💯 通配符与上下限⚙️通配符(Wildcard)⚙️泛型上下限⚙️应用场景 🦜泛型支持的类…

【开源】一个基于 Vue3 和 Electron 开发的第三方网易云音乐客户端,具有与官方客户端相似的界面布局

🎵 XCMusic:高颜值第三方网易云音乐客户端 🎶 📍 项目亮点 XCMusic 是一款基于Vue3Electron开发的开源、跨平台网易云音乐客户端。 此音乐播放器基于 Electron 开发,旨在为用户提供简洁、美观、兼容多平台的音乐体验。…

labview设计一个虚拟信号发生器

目标:设计一个虚拟信号发生器,通过功能键的设置可以产生正弦波、三角波、方波和锯齿波,并可以通过输入控件设置采集信号的频率、幅值、相位等参数。 一、正弦波 (1)创建一个枚举 (2)点击属性后…

工业路由器WiFi6+5G的作用与使用指南,和普通路由器对比

工业路由器的技术优势 在现代工业环境中,网络连接的可靠性与效率直接影响生产效率和数据处理能力。WiFi 6(即802.11ax)和5G技术的结合,为工业路由器注入了强大的性能,使其成为智能制造、物联网和边缘计算的理想选择。…

编译Qt5.15.16并启用pdf模块

编译Qt5.15.16并启用pdf模块 标题1.目录设置 -q-bulid –qt-everywhere-src-5.15.16 –bulid cd bulid 必须,否则会提示Project ERROR: You cannot configure qt separately within a top-level build. create .qmake.stash and .qmake.super in build folder …

Python绘制新冠疫情的知识图谱

from pyvis.network import Network import networkx as nx import pandas as pd import os# 修复模板路径 from pyvis import network as net_moduleos.environ["PATH"] os.pathsep os.path.dirname(net_module.__file__)# 创建紧密连接图 g nx.Graph()# 关键修…

使用RUST在Arduino上进行编程(MacOS,mega板)

近年来,RUST成为了嵌入式编程的热门语言,本文通过实现(1)LED闪灯,以及(2)在console(终端)实现“Hello Rust World”两项功能来完成实操的入门。 深入学习可以参考RUST语言…

大模型微调与高效训练

随着预训练大模型(如BERT、GPT、ViT、LLaMA、CLIP等)的崛起,人工智能进入了一个新的范式:预训练-微调(Pre-train, Fine-tune)。这些大模型在海量数据上学习到了通用的、强大的表示能力和世界知识。然而,要将这些通用模型应用于特定的下游任务或领域,通常还需要进行微调…

OpenCv高阶(十六)——Fisherface人脸识别

文章目录 前言一、Fisherface人脸识别原理1. 核心思想:LDA与Fisher准则2. 实现步骤(1) 数据预处理(2) 计算类内散布矩阵 SW对每个类别(每个人)计算均值向量 μi:(3) 计算类间散布矩阵 SB(4) 求解投影矩阵 W(5) 降维与分类 3. Fish…

二分算法的补充说明

在上一节中我们简单介绍了二分算法,通过区分小于等于,大于或者小于,大于等于我们可以求出它们的边界值。 具体方法是先看一下要求哪里的边界值,分成两部分让如果求小于等于的右边界,我们根据条件让rightmid-1,leftmid…

java基础(api)

包: 导包,不同包的程序名相同。 但是要用两个的话可以这样子写: String String概述 String的常用方法 String使用时的注意事项 String的应用案例

VSCode推出开源Github Copilot:AI编程新纪元

文章目录 开源决策的背后GitHub Copilot的演进历程Copilot Chat核心功能解析1. 聊天界面集成2. 代码理解与生成3. 多文件编辑能力4. 智能代理模式 开源后的影响与展望对开发者的影响对AI编程工具市场的影响未来发展方向 如何开始使用GitHub Copilot结语相关学习资源 在AI编程助…

Mujoco 学习系列(四)官方模型仓库 mujoco_menagerie

mujoco 官方在 Github 上发布了一个他们自己整理的高质量的模型仓库,这个仓库是一个持续维护的项目,里面包含了目前市面上常见的人形机器人、机械臂、底盘等模型,对于初学者而言是一个非常好的学习资料,无论是想在仿真环境中尝试还…

代码走读 Go 语言 Map 的实现

序言 在日常的开发当中,我们一定离不开一个数据结构字典。不仅可以存储关联数据对,还可以在 O(1) 的时间复杂度进行查找。很久之前在 一篇文章带你实现 哈希表 介绍了相关的原理以及简单的实现。所以这篇文章中我们就不多赘述哈希表的原理,而…

PostgreSQL14 +patroni+etcd+haproxy+keepalived 集群部署指南

使用postgresql etcd patroni haproxy keepalived可以实现PG的高可用集群,其中,以postgresql做数据库,Patroni监控本地的PostgreSQL状态,并将本地PostgreSQL信息/状态写入etcd来存储集群状态,所以,patr…

数据结构知识点汇总

1、在数据结构中,随机访问是指能够直接访问任一元素,而不需要从特定的起始位置开始,也不需要按顺序访问其他元素。这种访问方式通常不涉及遍历。例如,数组(array)支持随机访问,你可以直接通过索…