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

浅谈 MVVM 模式

news 来源：原创 2025/9/2 8:00:10

MVVM（Model-View-ViewModel） 是一种软件架构设计模式，旨在将用户界面（UI）与业务逻辑分离，从而提高代码的可维护性和可测试性。它在现代前端开发和桌面应用开发中得到了广泛应用，尤其是在构建复杂的用户界面时，MVVM 模式能够显著提升开发效率和代码质量。

Vue.js、Angular 等现代前端框架内置了对 MVVM 模式的支持，通过响应式数据绑定和组件系统，使得开发者可以轻松地实现视图与数据的分离。
React 也可以通过使用状态管理库（如 Redux 或 MobX）来实现 MVVM 模式。

1. MVVM 的三个核心组成部分

MVVM 模式由三个主要部分组成：Model（模型）、View（视图） 和 ViewModel（视图模型）。它们之间的关系如下：

Model（模型）：
- 职责：负责存储和管理应用程序的数据。它通常与后端 API 交互，处理数据的获取、更新和存储。
- 特点：与视图和视图模型解耦，不直接与用户界面交互。
- vue示例：
```
  const app = new Vue({el: '#app',data: {message: 'Hello, Vue!'}});
```
View（视图）：
- 职责：用户界面部分，负责展示数据和用户与应用的交互。
- 特点：通常由 HTML、CSS 和模板组成，不包含业务逻辑。
- 示例：
```
<div id="app">{{ message }}</div>	
```
ViewModel（视图模型）：
- 职责：作为 Model 和 View 之间的桥梁，处理 UI 逻辑和数据绑定。
- 特点：负责处理数据的变化和视图的更新
- 示例：
```
const app = new Vue({el: '#app',data: {message: 'Hello, Vue!'},methods: {updateMessage() {this.message = 'Message changed!';}}
});
```

2. MVVM 模式的工作流程

数据绑定：
- View 通过数据绑定机制从 ViewModel 获取数据并展示。
- 当 Model 的数据发生变化时，ViewModel 会通知 View 更新视图。
- 当用户在 View 中进行操作（如点击按钮）时，View 会通知 ViewModel 处理这些操作。
- 例如：vue 通过 getter 和 setter 实现数据的响应式，当数据变化时，相关的dom元素会自动更新
```
 app.message = 'Hello, World!'; // 视图会自动更新
```
数据同步：
- ViewModel 负责将用户的输入同步到 Model 中。
- ViewModel 也可以将 Model 的数据变化同步到 View 中，实现双向数据绑定。
业务逻辑处理：
- ViewModel 包含业务逻辑，处理用户的操作和数据的更新。
- ViewModel 通过调用 Model 的方法与后端交互，获取或更新数据。

3. MVVM 模式的优势

分离关注点：
- 将数据、视图和业务逻辑分离，使代码结构更加清晰，便于维护和扩展。
- 视图和模型之间解耦，视图模型作为中间层，减少了视图和模型之间的直接依赖。
提高可维护性：
- 由于代码结构清晰，开发者可以更容易地理解和修改代码。
- 视图和模型的解耦使得代码更易于维护和扩展。
增强可测试性：
- ViewModel 包含了大部分的业务逻辑，可以独立于视图进行单元测试。
- Model 也可以独立于视图模型进行测试，提高代码的可测试性。
提高开发效率：
- 通过数据绑定机制，减少了手动操作 DOM 的代码，提高了开发效率。
- 视图模型的逻辑可以复用于不同的视图，减少了重复代码。

浅谈 MVVM 模式

MVVM（Model-View-ViewModel） 是一种软件架构设计模式，旨在将用户界面（UI）与业务逻辑分离，从而提高代码的可维护性和可测试性。它在现代前端开发和桌面应用开发中得到了广泛应用，尤其是在构建复杂…...

编程日记 2025/9/2 8:00:10

flutter点击事件教程

在 Flutter 中，处理点击事件是非常常见的操作。Flutter 提供了多种方式来实现用户交互，比如按钮点击、手势检测等。下面是一个详细的教程，帮助你理解如何在 Flutter 中实现点击事件。一、使用 onPressed 实现按钮点击事件 Flutter 提供了 E…...

编程日记 2025/8/28 11:24:59

[SAP SD] 常用事务码

在SAP系统中，事务码(Transaction Code)是一个具有特定功能的代码标识符，用于快速调用和执行SAP系统内的各种业务模块的功能 /NT-code: 关闭当前业务窗口，退回到SAP初始界面，进入对应的T-Code窗口 /OT-code: 新建SAP GUI窗口&…...

编程日记 2025/9/2 7:59:33

【＜二＞丹方改良：Spring 时代的 JavaWeb】之 Spring Boot 的未来：从微服务到云原生的演进

<前文回顾> 点击此处查看合集 https://blog.csdn.net/foyodesigner/category_12907601.html?fromshareblogcolumn&sharetypeblogcolumn&sharerId12907601&sharereferPC&sharesourceFoyoDesigner&sharefromfrom_link <今日更新> 一、引子&…...

编程日记 2025/9/2 7:56:48

保留格式地一键翻译英文ppt

我手头上有一个贝叶斯推断的英文ppt，假如我想翻译成中文，整合起来进行pre，你会怎么做？ 1，复制粘贴型： 在翻译软件与源文件ppt之间不断流转，效率太低 2，office ppt自带翻译插入整合…...

编程日记 2025/9/2 7:54:09

晶晨S905L3S／S905L3SB_安卓9.0_10秒开机_通刷-线刷固件包

晶晨S905L3S／S905L3SB_安卓9.0_10秒开机_通刷-线刷固件包线刷方法：（新手参考借鉴一下） 使用晶晨刷机工具USB_Burning_Tool进行刷机；请使用Amlogic USB Burning Tool v2.2.5或v2.2.7（晶晨线刷烧录工具v2.2…...

编程日记 2025/9/2 7:59:34

Android Transition转场动效使用全解析

Transition的使用和原理项目效果 1. 简述 Android 4.4.2 中引入了 Transition 过渡动画，不过功能比较简单。在 Android 5.0 的 Material Design 中引入更完整和强大的 Transition 框架。通过Transition可以实现： 同一个页面中的场景过渡动画Activit…...

编程日记 2025/9/2 3:27:20

第九章Python语言高阶加强-面向对象篇

目录一.初始对象二.成员方法 1.成员变量和成员方法三.类和对象四.构造方法五.其他内置方法（魔术方法） 1.__str__字符串方法 2.__lt__小于符号比较方法 3.__le__小于等于比较符号方法 4.__eq__比较运算符实现方法六.封装七.继承 1.继承…...

编程日记 2025/8/25 21:43:57

AI重构SEO关键词智能布局

内容概要随着人工智能技术在搜索引擎优化领域的深入发展，AI驱动的关键词智能布局正在重塑传统SEO策略的核心逻辑。通过整合自然语言处理、深度学习与语义分析技术，现代SEO系统已形成包含智能分词、意图解码、动态优化的三维技术框架，使关键…...

编程日记 2025/9/2 7:56:47

言同数字：法新社AFP海外新闻媒体发稿成功案例——出海品牌背书必备

作者：言同数字全球传播团队一、品牌困境：当中国技术遇上海外认知壁垒案例背景： 某中国光伏储能企业（应保密要求匿名，代号"GreenTech"），其家用储能系统在欧洲市场遭遇&#xff1…...

编程日记 2025/9/2 7:59:33

第三章 react redux的学习之redux和react-redux，@reduxjs/toolkit依赖结合使用

redux系列文章目录第一章简单学习redux,单个reducer 第二章简单学习redux,多个reducer 第四章 react-redux，reduxjs/toolkit依赖，学习第五章两张图告诉你redux常使用的api有哪些前言前面两章，我们是只使用的redux的依赖。本章…...

编程日记 2025/8/29 0:56:55

【HTML】纯前端网页小游戏-戳破彩泡

分享一个简单有趣的网页小游戏 - 彩色泡泡爆破。玩家需要点击屏幕上随机出现的彩色泡泡来得分。 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-wi…...

编程日记 2025/9/2 1:12:38

【Python使用】嘿马云课堂web完整实战项目第3篇：增加数据,修改数据【附代码文档】

教程总体简介：项目概述项目背景项目的功能构架项目的技术架构 CMS 什么是CMS CMS需求分析与工程搭建静态门户工程搭建 SSI服务端包含技术页面预览开发 4 添加“页面预览”链接页面发布需求分析技术方案测试环境搭建数据字典服务端前端数据模型页面原…...

编程日记 2025/9/2 7:51:53

数据结构【栈和队列附顺序表应用算法】

栈和队列和顺序表应用算法练习 1.栈1.1概念与结构1.2栈的实现 2.队列2.1概念与结构2.2队列的实现 3.附（顺序表应用算法）3.1移除元素3.2删除有序数组中的重复项3.3合并两个有序数组 1.栈 1.1概念与结构栈：⼀种特殊的线性表，其只…...

编程日记 2025/8/28 6:04:49

Redis数据结构之String

目录 1.概述2.常见操作2.1 SET/GET2.2 MSET/MGET/MSETNX2.3 GETRANGE/SETRANGE2.4 INCR(BY)/DECR(BY)2.5 STRLEN2.6 APPEND2.7 GETSET 3.小结 1.概述 String是最常用的数据类型，一个key对应一个value。String是二进制安全的，可以包含任何数据&#xff0…...

编程日记 2025/8/18 0:20:31

Maven 远程仓库推送方法

步骤 1：配置 pom.xml 中的远程仓库地址在项目的 pom.xml 文件中添加 distributionManagement 配置，指定远程仓库的 URL。 xml 复制 <project>...<distributionManagement><snapshotRepository><id…...

编程日记 2025/8/31 11:05:33

uname

在 C 语言中，uname 函数用于获取当前操作系统的相关信息。它是 POSIX 标准的一部分，定义在 <sys/utsname.h> 头文件中。通过调用 uname 函数，可以获取系统名称、节点名称（主机名）、操作系统版本、机器硬件架构…...

编程日记 2025/8/27 1:06:17

【无标题】object，wait，notifyAll

在 Java 中，Object类提供了wait()方法，用于线程间的协作和同步。wait()方法使得当前线程暂停执行，并释放当前对象的锁，直到其他线程调用该对象的notify()或notifyAll()方法将其唤醒。这是实现线程间通信和同步的重要机制之一。 w…...

编程日记 2025/9/1 9:07:42

【Vue】核心特性实战解析：computed、watch、条件渲染与列表渲染

目录一、计算属性（computed） ✅ 示例： 计算属性-methods实现：在插值模块里，实现函数的调用功能计算属性-computed的实现： 计算属性-简写： ✅ 特点： ⚠️ 与 methods 的区别…...

编程日记 2025/8/29 17:52:40

精品可编辑PPT | 基于湖仓一体构建数据中台架构大数据湖数据仓库一体化中台解决方案

本文介绍了基于湖仓一体构建数据中台架构的技术创新与实践。它详细阐述了数据湖、数据仓库和数据中台的概念，分析了三者的区别与协作关系，指出数据湖可存储大规模结构化和非结构化数据，数据仓库用于高效存储和快速查询以支持决策，…...

编程日记 2025/8/28 0:19:33

基于Python网络爬虫的智能音乐可视化系统(源码+lw+部署文档+讲解)，源码可白嫖!

摘要时代在飞速进步，每个行业都在努力发展现在先进技术，通过这些先进的技术来提高自己的水平和优势，智能音乐可视化系统当然不能排除在外。我本次开发的基于网络爬虫的智能音乐可视化系统是在实际应用和软件工程的开发原理之上，…...

编程日记 2025/9/2 0:39:01

基于STM32与应变片的协作机械臂力反馈控制系统设计与实现----2.2 机械臂控制系统硬件架构设计

2.2 机械臂控制系统硬件架构设计一、总体架构拓扑 1.1 典型三级硬件架构 #mermaid-svg-MWmxD3zX6bu4iFCv {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-MWmxD3zX6bu4iFCv .error-icon{fill:#552222;}#mermaid-s…...

编程日记 2025/8/30 14:07:16

在线记事本——支持Markdown

项目地址 https://github.com/Anyuersuper/CloudNotebook 百度网盘通过网盘分享的文件：CloudNotebook-master.zip 链接: https://pan.baidu.com/s/1kd2qNvm0eXc6_7oYDR769A?pwdyuer 提取码: yuer 📝 云笔记 (Cloud Notebook) 云笔记是一个简洁、安全…...

编程日记 2025/9/1 15:57:46

DDPM 做了什么

本博客主要侧重点在于HOW也就是DDPM怎么做的而不是WHY为什么要这样做那么第一个问题DDPM做了一件什么事：这个算法通过逐渐向原图像添加噪声来破坏图像，然后再学习如何从噪声成恢复图像。第二件事如何做到的：通过训练一个网络，…...

编程日记 2025/8/30 18:23:17

Redis数据结构之List

目录 1.概述2.常见操作2.1 LPUSH/RPUSH/LRANGE2.2 LPOP/RPOP2.3 LINDEX2.4 LLEN2.5 LREM2.6 LTRIM2.7 RPOPLPUSH2.8 LSET2.9 LINSERT 1.概述 List是简单的字符串列表，单key多个value，按照插入顺序排序。支持添加一个元素到列表的头部(左边)或者尾部(右…...

编程日记 2025/8/28 6:56:54

L2-023 图着色问题 #DFS C++邻接矩阵存图

文章目录题目解读输入格式输出格式思路Ac CODE 参考题目解读给定一个无向图V，询问是否可以用K种颜色为V中每一个顶点分配一种颜色，使得不会有两个相邻顶点具有同一种颜色输入格式第一行给出V,E,K， 分别代表无向图的顶点，…...

编程日记 2025/8/27 15:05:42

架构下的按钮效果设置

以下是一个完整的跨QML/Qt Widgets的主题方案实现，包含对按钮阴影的统一管理： 一、项目结构 Project/ ├── core/ │ ├── thememanager.h │ └── thememanager.cpp ├── widgets/ │ ├── mainwindow.h │ ├── mainwindow.cpp …...

编程日记 2025/8/28 22:10:29

Unhandled exception: org.apache.poi.openxml4j.exceptions.InvalidFormatException

代码在main方法里面没有报错，在Controller里面就报错了。原来Controller类里面少了行代码 import org.apache.poi.openxml4j.exceptions.InvalidFormatException; 加上去就解决了。...

编程日记 2025/8/18 0:40:29

Vue2_Vue.js教程

目录一、Vue.js安装 1、独立版本 2、CDN 方法 3、npm 方法二、Vue Al编程助手三、Vue.js目录结构目录解析四、Vue.js 起步 1.如何定义数据对象和方法并渲染进页面五、Vue.js 模板语法插值文本_{{}} Html_v-html 指令属性_v-bind (数据传输工具)指令表…...

编程日记 2025/8/18 0:10:45

2025/4/2 心得

第一题题目描述给定1001个范围在[1,1000]的数字，保证只有1个数字重复出现2次，其余数字只出现1次。试用O(n)时间复杂度来求出出现2次的这个数字。不允许用数组输入格式第一行：一个整数1001； 第二行：1001个用…...

编程日记 2025/8/28 0:23:39

Deep Reinforcement Learning for Robotics翻译解读

a. 机器人能力 1 单机器人能力（Single-robot competencies） 运动能力（Mobility） 行走（Locomotion）导航（Navigation） 操作能力（Manipulation） 静态操作&…...

编程日记 2025/8/28 22:20:03

【Linux】日志模块实现详解

📢博客主页：https://blog.csdn.net/2301_779549673 📢博客仓库：https://gitee.com/JohnKingW/linux_test/tree/master/lesson 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！ &…...

编程日记 2025/8/30 7:15:35

AT_abc212_d [ABC212D] Querying Multiset

链接：AT_abc212_d [ABC212D] Querying Multiset - 洛谷题目描述高橋君は何も書かれていないたくさんのボールと 1 つの袋を持っています。最初、袋は空で、高橋君は Q 回の操作を行います。それぞれの操作は以下の 3 種類のうちのいずれかです。操作 1 : ま…...

编程日记 2025/8/29 9:56:32

Android使用OpenGL和MediaCodec录制

目录一,什么是opengl 二,什么是Android OpenGL ES 三, OpenGL 绘制流程四, OpenGL坐标系五, OpenGL 着色器六, GLSL编程语言七,使用MediaCodec录制在Opengl中渲染架构八,代码实现 8.1 自定义渲染view继承GLSurfaceView 8.2 自定义渲染器TigerRender 8.3 创建编…...

编程日记 2025/8/27 11:39:07

Java 实现插入排序：[通俗易懂的排序算法系列之三]

引言大家好！欢迎继续关注我的排序算法系列。今天，我们要学习的是另一种非常基础且重要的排序算法——插入排序 (Insertion Sort)。插入排序的思路非常贴近我们日常整理扑克牌的方式，理解起来相对自然。虽然它在最坏情况下的效率不高&…...

编程日记 2025/8/23 14:54:23

HarmonyOS：WebView 控制及 H5 原生交互实现

一、效果展示二、技术栈技术栈： 编程语言：使用 TypeScript 进行开发，借助其类型系统提升代码的可读性与稳定性。框架与库：基于鸿蒙系统相关框架（如kit.ArkWeb、hadss/hmrouter&#xff09…...

编程日记 2025/8/26 14:55:56

250405-VSCode编辑launch.json实现Debug调试Open-WebUI

A. 最终效果根据__init__.py配置launch.json 根据中utils/chat.py中form_data的messages [{role: user, content: 唐老鸭}],可以找到用户输入，进而通过关键词或模型调用的方式，对敏感问题进行特殊处理。 B. 文件配置 launch.json // { // /…...

编程日记 2025/8/30 13:31:45

SQL Server 数据库实验报告

1.1 实验题目：索引和数据完整性的使用 1.2 实验目的： （1）掌握SQL Server的资源管理器界面应用； （2）掌握索引的使用； （3）掌握数据完整性的…...

编程日记 2025/8/28 4:13:13

【寻找Linux的奥秘】第三章：基础开发工具（上）

请君浏览前言1. 软件包管理器1.1 linux中安装软件1.2 yum的具体操作1.2.1 查找软件包1.2.2 安装软件1.2.3 卸载软件 1.3 小结 2. 编辑器vim2.1 vim的基本概念和操作2.2 命令模式的命令集光标定位其他命令模式切换（常用的） 2.3 末⾏模式的命令集2.4 小结…...

编程日记 2025/8/27 7:10:38

Photoshop 2025 Mac中文Ps图像编辑

Photoshop 2025 Mac中文Ps图像编辑文章目录 Photoshop 2025 Mac中文Ps图像编辑一、介绍二、效果三、下载一、介绍 Adobe Photoshop 2025 Mac版集成了多种强大的图像编辑、处理和创作功能。①强化了Adobe Sensei AI的应用，通过智能抠图、自动修复、图像生成等功能…...

编程日记 2025/8/28 13:53:06

#SVA语法滴水穿石# （004）关于 ended 和 triggered 用法

在 SystemVerilog 断言（SVA, SystemVerilog Assertions）中，ended 是一个用于序列（sequence）的关键字，它表示某个序列（sequence）在特定时间点已经成功匹配（即“结束”）。 ended 主要用于同步不同序列的时间关系，尤其是在多序列组合或属性（property）中需要对齐时…...

编程日记 2025/8/29 3:49:15

16.1Linux自带的LED灯驱动实验(知识)_csdn

前面我们都是自己编写 LED 灯驱动，其实像 LED 灯这样非常基础的设备驱动， Linux 内核已经集成了。 Linux 内核的 LED 灯驱动采用 platform 框架，因此我们只需要按照要求在设备树文件中添加相应的 LED 节点即可，本章我们就来学习如…...

编程日记 2025/8/31 13:13:28

普通类、抽象类和接口的区别

1. 普通类 (Concrete Class) 定义：完整的类，可以直接实例化特点： 可以包含属性、普通方法（有具体实现）和构造方法可以被直接实例化创建对象可以被继承（除非用final修饰） 示例&#xff1…...

编程日记 2025/8/29 7:54:56

使用 Elastic 实现端到端的大语言模型（LLM）可观测性：洞察生成式 AI 应用这个不透明的世界

作者：来自 Elastic Daniela Tzvetkova 及 Bahubali Shetti 在快速发展的人工智能领域，大语言模型（Large Language Models - LLMs）已成为创新的灯塔，为各行各业带来了前所未有的能力。从生成类人文本、翻译语言到提供个…...

编程日记 2025/8/30 0:58:36

15.2linux设备树下的platform驱动编写(程序)_csdn

我尽量讲的更详细，为了关注我的粉丝！！！ 修改设备树文件： 这个我们在上一章已经写过了，但是还是带着大家来重写一遍！ 1.打开pinctrl-stm32.c 这个文件： strict 成员变量默认为 true&…...

编程日记 2025/9/1 7:55:01

Java的Selenium的特殊元素操作与定位之window切换

当你要操作另外一个窗口页面的元素时，一定要注意先切换窗口切换方式:传入要操作窗口的name或者句柄handle driver.switchTo.window(nameOrHandle); 如何获取到窗口的句柄 driver.getWindowHandle();//获取当前操作窗口的句柄driver.getWindowHandles();//获取测…...

编程日记 2025/8/28 12:28:36

【Rust学习】Rust环境搭建和Rust基础语法

本文专栏：Rust学习目录一，Rust环境搭建 1，C环境安装 2，Rust下载 3，Rust安装 4，Rust环境检测二，创建Rust项目 1，rustc 2，cargo 三，输出到命令行 …...

编程日记 2025/8/30 20:35:45

在windows环境下通过docker-compose脚本自动创建mysql和redis

一、环境版本在windows环境下通过docker容器运行各种服务，使用的软件版本如下： docker desktop ：V4.39.0 【docker的安装环境设置略】 mysql：9.2 redis：7.4.2 二、各配置文件 1.已经解决了字符集和排序规则问题造成…...

编程日记 2025/8/29 7:30:05

【玩泰山派】2、制作buildroot镜像，并烧录

文章目录前言制作buildroot镜像过程搭建环境（docker版）下载泰山派开发的sdk利用制作的镜像和下载的sdk去启动开发docker容器编译buildroot镜像参考前言泰山派官方提供了不少现成的镜像但是都买了泰山派了，肯定是想自己编译折腾下&…...

编程日记 2025/8/26 23:00:09

实验二 VLAN 的配置与应用

一、实验目的 1. 熟悉 VLAN 和 PORT VLAN 的原理； 2. 熟悉华为网络模拟器的使用； 3. 掌握网络拓扑图的绘制； 4. 掌握单交换机内 VLAN 的配置。二、实验设备 PC、华为模拟器 ENSP。三、实验步骤知识准备：VLAN 和 PORT V…...

编程日记 2025/8/23 5:12:40

1. MVVM 的三个核心组成部分

2. MVVM 模式的工作流程

3. MVVM 模式的优势

相关文章：