MVVM与MVC原理图解

最新推荐文章于 2025-06-01 10:16:20 发布
原创 最新推荐文章于 2025-06-01 10:16:20 发布 · 2.1k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#MVVM与MVC原理图解

本文详细阐述了MVVM（数据驱动视图）的执行原理，解释了视图、视图模型和模型之间的关系。视图通过数据绑定与视图模型交互，而视图模型作为桥梁连接模型与视图，负责数据转换和界面逻辑。模型则封装业务逻辑，独立于视图和视图模型。此外，MVVM常用于Vue和Angular等框架开发。同时，文章也提到了MVC原理的图解。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

MVVM(数据驱动视图)原理

执行原理：

  • 视图（view）：视图负责界面和显示。它通过DataContext(数据上下文)和ViewModel进行数据绑定，不直接与Model交互。 可以绑定Behavior/Comand来调用ViewModel的方法，Command是View到ViewModel的单向通行，通过实现Silverlight提供的IComand接口来实现绑定，让View触发事件，ViewModel来处理事件，以解决事件绑定功能。
  • 视图模型（viewmodel）：视图模型主要包括界面逻辑和模型数据封装，Behavior/Command事件响应处理，绑定属性定义和集合等。它是View和Model的桥梁，是对Model的抽象，比如：Model中数据格式是“年月日”，可以在ViewModel中转换Model的数据为“日月年”供View显示。
  • 模型（model）：Model与MVC模式一样，Model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。它具有对数据直接访问的权利，例如对数据库的访问，Model不依赖于View和ViewModel，也就是说，模型不关心会被如何显示或是如何被操作，模型也不能包含任何用户使用的与界面相关的逻辑。Model在实际开发中根据实际情况可以进行细分。比如在广州市城乡规划资源平台就将Model将Service和Reposiroty结合为WCF服务由ViewModel进行调用。

图解:

在这里插入图片描述

应用场景：框架开发（vue，angular）

MVC原理图解:

在这里插入图片描述

最低0.47元/天 解锁文章

200万优质内容无限畅学
Vue源码分析-MVVM实现原理
renzhongrui的博客
11-28 1260
什么是MVVM MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。 模型指的是后端传递的数据。 视图指的是所看到的页面。 视图模型是mvvm模式的核心，它是连接view和model的桥梁。它能够将数据转化为视图，也能将视图转化为模型，其中视图与模型是不能直接进行通信。 ViewModel通过DOM事件监听视图数据的变化，一旦数据发生改变则更新model数据； Mo...
还不了解MVC、MVP、MVVM模式？（深度解析、全实例讲解）
2401_84003733的博客
05-11 1971
MVP技术架构的项目结构非常清晰：把MVPModelViewPresenter，每个文件下分别是对应的接口和实现的类其中Model层的fanyi类是作为实现用GSON解析JSON信息的一个JavaBean我坚信，坚持学习，每天进步一点，滴水穿石，我们离成功都很近！以下是总结出来的字节经典面试题目，包含：计算机网络，Kotlin，数据结构与算法，Framework源码，微信小程序，NDK音视频开发，计算机网络等。字节高级Android经典面试题和答案。
MVC与MVVM的区别
jdBug
03-27 216
1. Mvvm定义MVVM是Model-View-ViewModel的简写。 即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向： 一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。 二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据...
MVVM、MVC的区别、什么是MVVM
最新发布
m0_74416054的博客
06-01 1415
MVVM是Model - View - ViewModel的缩写，它是一种软件架构设计模式，主要用于构建用户界面。Model（模型层）它是应用程序中负责数据管理和业务逻辑的部分。例如，在一个电商应用中，Model层可能包含商品信息（如价格、库存等）、用户信息（如用户名、密码等）以及与数据库交互的代码。Model层不直接与用户界面交互，它只关注数据的存储、获取和处理。比如，当商品价格需要根据促销活动进行调整时，Model层会负责计算新的价格，并将新的数据提供给其他部分。View（视图层）
MVC开发模式图解
热门推荐
移动互联网改变生活,高效配对交易创造财富
10-27 1万+
  MVC控制在C,Delphi,C++,VC,java,.NET解决方案的对应关系 chinayaosir say:"MVC=MVC+L+D" 界面类型 实现方案 View 视图 ( 用户界面 ) Control 控制( 用户动作 ) Modul 模块 ...
MVC 和 MVVM 详解
iOS_开发
05-27 483
????????关注后回复“进群”，拉你进程序员交流群????????转自：掘金洋仔https://juejin.cn/post/6961982789717606408前言请预留足够...
Vue的MVVM原理图
feng_strong的博客
07-04 1336
mvc和mvvm的关系图解
04-02
mvc和mvvm的关系图解
MVVM与MVC的区别和联系(+Vue基本代码与MVVM之间的对应关系)
meng的博客
07-16 861
MVC MVC 是后端的分层开发概念；全名是Model View Controller，是模型(model)－视图(view)控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码。 M(Model模型) 数据层，负责操作数据库，进行数据的CRUD V(view视图) 视图层，每当用户操作了界面，就需要进行业务的处理，都会通过网络请求，去请求后端的服务器 C(Controller控制器) 业务逻辑层 在MVC模型里，Model不依赖于View，但是 V
Android~MVC、MVP、MVVM和MVI对比
Hynson的学习笔记
09-24 1964
本文梳理记录MVC、MVP、MVVM、MVI概念和演进，以及自己的理解。 面试时经常被问到，MVC MVP MVVM他们到底是什么？如何搭建一个页面？
mvc和mvvm的区别及原理
weixin_43819045的博客
03-15 428
2. Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。总结：在MVVM的框架下视图和模型是.
mvvm原理（vue图解01）
maggie
02-26 1335
MVC框架 将整个前端页面分成View，Controller，Modal，视图上发生变化，通过Controller（控件）将响应传入到Model（数据源），由数据源改变View上面的数据。 整个过程看起来是行云流水，业务逻辑放在Model当中，页面渲染逻辑放在View当中，但在实际运用上却存在一个问题：那就是MVC框架允许View和Model直接进行通信！！ 换句话说，View和Model之间随...
MVVM原理
XIAO_YuBaby的博客
11-04 1515
首先了解一下MVC Model：数据模型，用来存储数据 View：视图界面，用来展示UI界面和响应用户交互 Controller：控制器(大管家角色)，监听模型数据的改变和控制视图行为、处理用户交互 接下来介绍MVVM MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）， 优点简白点说就是开发越来越简单 下图是MVVM原理图： 三者之间交流原理： 数据访问层(Mode...
MVVM 和 MVC的原理及区别
isfor_you的博客
03-04 3843
一、什么是MVVM和MVC？ MVVM（Model-View-ViewModel）： M：Movel（数据模型） V：View VM：ViewModel 是一个同步View 和 Model的对象。 将数据模型数据双向绑定的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。 MVC（Model-View-Controller）： M：
MVC图解
轻风木竹
04-14 438
MVC 图解 ：
xyddd的博客
06-04 168
：
mvc图解
12-03 466
 调用顺序：首先Controller调用Service               然后Service调用Dao 对应公司的4层：     Action:    Controller                             Dao:       Dao                             Domain:  Model 
MVC 图解
lzz360的专栏
08-26 1671
MVC; 是为了实现数据的显示和数据处理 和数据的存储 分离开 View：界面 Contoller:控制器即有数据的处理都要走控制器 Model: 这个是业务逻辑模型，里面包含着各种类用于处理数据
详细介绍MVVM模式
03-08
<think>好的，我现在需要帮用户详细介绍MVVM模式。首先，用户之前已经请求过学习C#和WPF的帮助，所以我应该考虑他们可能已经有了一定的基础，特别是在WPF方面，因为MVVM通常与WPF结合使用。接下来，用户现在明确要求详细介绍MVVM模式，这可能意味着他们已经接触到相关概念，但需要更深入的理解。 首先，我要明确MVVM的核心概念，包括Model、View、ViewModel各自的职责，以及它们之间的交互方式。用户可能需要了解为什么MVVM在WPF中特别有用，尤其是数据绑定和命令系统如何促进分离关注点。此外，用户可能对如何实际应用MVVM模式感兴趣，比如具体的实现步骤和示例代码。 接下来，我需要考虑用户可能存在的潜在问题。比如，他们可能不清楚MVVM与其他模式（如MVC或MVP）的区别，或者在实际开发中如何正确地实现数据绑定和命令。因此，在回答中应该包括这些对比，以及具体的实现示例，比如INotifyPropertyChanged接口的使用和Command的实现方式。 另外，用户之前的学习路径中提到了MVVM模式实践，所以现在需要更详细地展开，可能包括架构图、数据流向、优缺点以及实际应用场景。需要确保解释清晰，结构分明，帮助用户逐步理解MVVM的各个组成部分。 还要注意使用用户之前提到的格式要求，比如行内数学表达式用$...$，独立公式用$$...$$，但根据之前的回复，似乎用户并没有在内容中使用数学公式，所以可能不需要特别处理这一点。但需要确保代码示例正确，符合C#和XAML的语法，并且结构清晰。 最后，应该提供学习建议和资源，帮助用户进一步巩固知识，比如推荐书籍或官方文档，并鼓励动手实践。同时，提醒用户常见错误，比如在ViewModel中直接操作UI元素，这违反了MVVM的原则，帮助他们避免常见陷阱。 总结来说，回答需要结构清晰，分点解释MVVM的各个部分，对比其他模式，提供代码示例，讨论优缺点，并给出学习建议，确保用户能够全面理解并应用MVVM模式。</think>我将通过架构图解+代码示例的方式，为你详解MVVM模式的核心原理和实现技巧。以下是结构化讲解： # 一、MVVM架构图解 $$ \begin{array}{ccc} \text{Model} & \xleftarrow[\text{数据存取}]{\text{业务逻辑}} & \text{ViewModel} \\ & & \downarrow \uparrow \text{数据绑定} \\ & & \text{View} \\ \end{array} $$ # 二、三大核心组件 1. **Model（数据模型）** - 职责：纯粹的数据结构和业务逻辑 - 示例： ```csharp public class UserModel { public string Name { get; set; } public int Age { get; set; } public bool Validate() => Age >= 18; } ``` 2. **View（界面呈现）** - 特征：仅包含XAML和基础事件处理 - 关键代码： ```xml <TextBox Text="{Binding UserName, UpdateSourceTrigger=PropertyChanged}" Margin="5"/> <Button Content="提交" Command="{Binding SubmitCommand}"/> ``` 3. **ViewModel（逻辑中介）** - 核心机制：实现`INotifyPropertyChanged`接口 - 典型实现： ```csharp public class UserViewModel : INotifyPropertyChanged { private string _userName; public string UserName { get => _userName; set { _userName = value; OnPropertyChanged(); // 可触发附加逻辑 } } public ICommand SubmitCommand => new RelayCommand(Submit); private void Submit() { // 调用Model层验证 var user = new UserModel { Name = UserName }; if(user.Validate()) { /* 业务操作 */ } } } ``` # 三、关键实现技术 1. **数据绑定** - 双向绑定原理：$ \text{View} \xrightleftharpoons[\text{UI更新}]{\text{用户输入}} \text{ViewModel} $ ```xml <!-- 绑定到集合 --> <ListBox ItemsSource="{Binding Users}" SelectedItem="{Binding SelectedUser}"/> ``` 2. **命令系统** - 实现`ICommand`接口解耦事件 ```csharp public class RelayCommand : ICommand { private readonly Action _execute; public RelayCommand(Action execute) => _execute = execute; public bool CanExecute(object parameter) => true; public void Execute(object parameter) => _execute(); } ``` 3. **消息传递** - 使用`EventAggregator`实现跨组件通信 ```csharp // 注册消息 eventAggregator.GetEvent<UserLoggedInEvent>().Subscribe(HandleLogin); // 发送消息 eventAggregator.GetEvent<UserLoggedInEvent>().Publish(userData); ``` # 四、模式优势分析 1. **关注点分离** - View专职UI呈现，ViewModel处理逻辑，Model管理数据 2. **可测试性增强** - ViewModel不依赖UI框架，可单独进行单元测试 3. **维护成本降低** - 修改界面布局无需改动业务逻辑（$\Delta \text{维护时间} \propto \frac{1}{\text{模块化程度}}$） # 五、适用场景建议 1. 数据驱动型应用（如仪表盘、表单系统） 2. 需要多端界面适配的项目（Desktop/Mobile共享ViewModel） 3. 长期维护的中大型项目 **学习路线建议**： 1. 先掌握基础实现，推荐《Pro WPF in C#》 2. 再学习框架应用，如Prism或MVVM Light 3. 最后研究高级模式：$ \text{Attached Behavior} \rightarrow \text{Composite Command} \rightarrow \text{Region Navigation} $ **常见误区警示**： - 避免在ViewModel中直接操作UI元素（如控制Window关闭） - 不要将业务逻辑写在View的后台代码中 - 警惕循环绑定（使用`UpdateSourceTrigger`控制更新频率）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值