从MVC到MVVM的意义之我见

最新推荐文章于 2025-06-01 10:16:20 发布
最新推荐文章于 2025-06-01 10:16:20 发布
阅读量2.1k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端架构 文章标签： MVC MVVM 前端架构
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Napoleonxxx/article/details/79322650
本文探讨了MVC架构的基本原理及其在前端应用中的作用，并对比了MVVM架构的优势，尤其是在状态管理和数据流方面的改进。

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

题外话：发现自己的草稿箱里面还有几篇很久以前写了一半但是忘了结尾的东西，年关将至把最不烧脑的一篇打扫一下发出来吧。

MVC

先来看一张MDN的官方图：

MVC MDN

我之所以班门弄斧自己整一张主要是为了接下来与MVVM的比较。
mvc myself

关于MVC的文章汗牛充栋，我就说一句个人认为理解的关键：单向数据流，状态管理方法论Flux是对它的极大改进。

从上图可以看出对于比较简单的应用，View, Controller, Model的分层是很清晰明了的，但是如果应用比较复杂，VIew与Model之间，Controller与Model之间很有可能是多对多的关系，作为一团乱麻会给应用的状态管理造成很大的混乱。

那么就有人提出改进的方法，可不可以将Model的职能简化(瘦Model)，单纯的作为一个数据层呢：
thin model

答案当然是可以！！

那么最后形成的数据流就是现在大热的MVVM。

MVVM

MVVM

MVVM的意义不仅在于使应用程序的层次更加简单，状态更加清晰，更重要的是View和ViewModel的交互方式，衍生出了很多双向绑定的方法（Angular.js的脏检查，Vue的数据劫持）

备注：上文提到的MVC/MVVM都是基于前端的架构角度，记得以前看过一篇文章是从应用程序前后端的角度来阐述MVC/MVVM，文章找不到了但是我觉得很有意思，所以也记下来。

如果把应用程序作为一个前后端的整体，其实就是一种MVVM的模式。前端页面没有办法去直接操作后台数据库，只能通过发送http请求(像是flux/redux中精炼的action)到Server端，Server端收到请求后更新数据库，返回数据更新前端页面。

前端页面MVC的状态管理难搞就是因为view和model的之间的操作可以实现而且成本很低。

这个观点很有启发性。画一张图以表敬意 :)
mvvm

从Android开发的角度比较MVC,MVP,MVVM的优缺点
2501_90405015的博客
01-28 884
作为一种新的模式，MVP与MVC有着一个重大的区别：在MVP中View并不直接使用Model，它们之间的通信是通过Presenter(MVC中的Controller)来进行的，虽然MVP 的表示层Presenter阻断了展现层view和模块层model的直接联系，但是展示层中的每个控件都得声明，对每个控件都需要使用 get方法获取控件的值，使用 set 方法更新控件的值。视图与控制器是相互分离，但却是联系紧密的部件，视图没有控制器的存在，其应用是很有限的，反之亦然，这样就妨碍了他们的独立重用。
MVC和MVVM详解
DH's Den
04-22 2万+
请预留足够的时间，您将看到大量的文字描述。但是相信我，您绝对值得花时间在这些文字描述上面。我已经尽了我最大所能来阐述关于MVC和MVVM如此这般设计的原因以及我们应该如何思考一些相关的问题
从MVC到MVVM
wichlin的博客
03-25 1047
从MVC到MVVM
MVVM、MVC的区别、什么是MVVM
最新发布
m0_74416054的博客
06-01 1523
MVVM是Model - View - ViewModel的缩写，它是一种软件架构设计模式，主要用于构建用户界面。Model（模型层）它是应用程序中负责数据管理和业务逻辑的部分。例如，在一个电商应用中，Model层可能包含商品信息（如价格、库存等）、用户信息（如用户名、密码等）以及与数据库交互的代码。Model层不直接与用户界面交互，它只关注数据的存储、获取和处理。比如，当商品价格需要根据促销活动进行调整时，Model层会负责计算新的价格，并将新的数据提供给其他部分。View（视图层）
从 MVC 到 MVVM 软件架构
青蛙king的博客
10-10 1217
MVC、MVP 和 MVVM 都是常见的软件架构设计模式（一种架构模式往往使用了多种设计模式）。
iOS VIPER架构实践(一)：从MVC到MVVM到VIPER
weixin_33963189的博客
08-21 313
简介 最近半年在写app的时候，研究了一下各种iOS代码架构，最后选择了VIPER进行实践，在此对实践中遇到的各种设计问题做一番总结，并分享造出的轮子。 对代码风格和架构有兴趣的同学，肯定都已经在很多地方见过各种架构的介绍。MVC、MVP、MVVM、VIPER，细分程度逐渐上升。这些架构设计都是来自MVC，只是各自用不同的方式对MVC进行了细分，在此只对MVC、MVP和MVVM作精简介绍，想要详细...
从MVC到MVVM，团队过渡方案：MVVM+Delegate实现
pilgrim1385的专栏
08-20 454
此实现方式为并不完全的MVVM，绑定耦合性较高。架构更偏向于MVP。只是因为团队对于MVVM和RxSwift or RAC不熟悉，RxSwift or RAC学习成本较高，此实现方式为中间过渡状态。 通过delegate形式实现反向绑定，容易理解，在本次项目中，让团队成员有更无痛的方式体验MVVM并逐步掌握此架构分层思想。 待熟练掌握MVVM结构后，后续项目逐步使用RxSwift开发。   ...
如何应对Android面试官 -＞ 玩转 MVx（MVC、MVP、MVVM、MVI）
IT_Android的博客
06-06 1053
本章主要讲解下 MVx；
谈谈我对MVC MVP MVVM的理解
yangwenqi666的博客
03-03 929
一开始我接触MVC和MVVM的时候很困惑，不明白他是属于一种模式还是一种框架，通过查阅网上的一些文章依旧没有说清楚，有的说模式，有的说框架，还有说框架模式的，也有说架构的，这就让我更加蒙蔽了，于是我请教了我的软件工程老师，老师说“在咱们软件工程里说的是一种模式，当然MVC本身也是一种框架结构”，后来我和他说明了网上的几个叫法，他说怎么说都可以，好吧，不过我更倾向于说他是一种框架模式。 MVC ...
MVC,MVP,MVVM
weixin_47450807的博客
03-04 356
当我们在面试的时候被问到谈谈你对MVC，MVP,MVVM的理解。我们该如何回答，下面我们将对这些模式进行总结。 一、web1.0时代 在web1.0时代，当时并没有前端这个概念，当时如果要开发一个项目，通过java/php/.net进行开发，项目通常由多个aspx/jsp/php文件编写，每一个文件同时包含html,css,js,c#/java/php代码，系统架构如下所示。 这种架构的好处就是简单快捷，但是缺点是jsp代码难以维护。 为了让开发快捷，然后代码更加易于维护，现在后端衍生了MVC模式，前端展
什么是MVVM
热门推荐
春风化雨
12-13 8万+
1、什么是MVVM MVVM，是Model-View-ViewModel的简写，是M-V-VM三部分组成。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，其中ViewModel将视图 UI 和业务逻辑分开，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。 MVVM采用双向数据绑定，view中数据变化将自动反映到viewmodel上，反之，model中数据变化也将会自动展示在页面上。把Model和View关联起来的就是ViewM.
MVVM的含义
weixin_65326972的博客
09-30 296
1、MVVM是Model View View Model的简写，微软的WPF带来了新的技术体验，如Silverlight、音频、视频、3D、动画，这导致了软件UI层更加细节化、可定制化。 2、MVVM框架的由来便是MVP模式与WPF结合的应用方式时发展演变过来的一种新型架构框架，立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。 3、MVVM的优点有低耦合、可重用性、独立开发、 可测试。 4、MVVM的设计模式是WPF技术出现，从而使MVP设计模式有所改
MVVM的入门使用之含义了解
ZKhero的博客
03-20 506
项目中要用到MVVM的框架了，平时又忙的没有时间，慢慢来积累下把，下篇写代码1. 与MVP框架类似，主要利用4个特性，数据绑定（Data Binding） 依赖属性（Depandency Property） 命令（Command） 路有事件（Routed Event）；M---数据Model； V---View对应的activity或者xml文件，主要是绘制和交互； VM---ViewModel，...
MVVM概念
qq_34498806的博客
11-29 466
MVVM即Model View ViewModel 在前端开发中对MVVM的理解： Model:模型层，可能是固定写死的数据，更多的是网络请求中获取的数据； View:视图层，前端开发中通常就是DOM层，主要做用给用户展示各种信息； ViewModel：视图模型层，视图模型是VIew和Model沟通的桥梁；一方面实现了Data Binding（数据绑定），将Model的改变实时地反映到...
mvvm是什么?
junny_zz的博客
06-25 1660
mvvm
一、理解mvvm的概念
ADLF
11-18 254
一、理解mvvm的概念 先看下源码  
mvvm个人理解
ygy211715的博客
06-06 4563
做技术，，有什么好处么。。如果要我说的话，我之所以喜欢做技术，最大的原因是成就感吧。我喜欢做每当做完一个项目的时候的那份成就感。让我感觉自己的存在是有一定的价值的。但~也很累~终生学习是做技术的宿命吧。但是~话说回来了，哪行哪业不需要学习呢。对吧做前端就要不断的学习各种流行的框架，react,angular,vue。。你有没有发现，这些框架跟jquery这些框架不一样，他们采用的都是mvvm的软件...
[译]WPF 应用程序和MVVM设计模式 ——Josh Smith
weixin_30510153的博客
12-14 288
这篇文章讨论：模式与WPFMVP模式为什么MVVM更加适用于WPF用MVVM构建一个应用程序译文地址： http://www.cnblogs.com/lujiao_cs/archive/2011/10/30/2229419.html内容：　　专业的软件用户界面开发不太简单。它可能混杂了数据、交互设计、视觉设计、连接、多线程、安全性、国际化、验证、单元测试以及可触摸技术。考虑到用户界面...
unity MVC和MVVM
04-01
### Unity 中 MVC 和 MVVM 的区别与适用场景 #### 一、MVC 架构模式概述 MVC 是一种经典的设计模式，分为三个主要部分：Model（模型）、View（视图）和 Controller（控制器）。 - **Model** 负责管理应用程序的数据以及业务逻辑。它独立于 UI 层，专注于数据的操作和存储[^4]。 - **View** 表示用户界面层，用于向用户显示信息并接收用户的输入。 - **Controller** 则作为中间件，在 View 和 Model 之间传递请求和响应。它是整个系统的协调者，负责解析用户操作并将这些操作转化为对 Model 或 View 的具体修改[^1]。 在 Unity 中实现 MVC 模式时，通常会通过脚本组件来分别定义这三个角色的功能。例如，`PlayerController.cs` 可能是一个典型的控制器类，用来监听玩家的按键输入，并通知 `PlayerModel.cs` 更新游戏角色的状态[^5]。 --- #### 二、MVVM 架构模式概述 MVVM（Model-View-ViewModel）是一种更现代化的架构模式，特别适合支持双向数据绑定的应用程序开发环境，比如 WPF 和 Xamarin[^3]。尽管如此，MVVM 同样可以应用于 Unity 开发中： - **Model** 部分仍然保持不变，继续承担数据管理和业务逻辑的任务。 - **View** 主要关注图形化表现形式，不直接依赖任何后台逻辑。 - 新增了一个名为 ViewModel 的层次，充当桥梁作用，使得 View 不再需要直接访问 Model 数据源即可完成交互需求。这种机制允许开发者利用属性更改通知功能自动同步界面上的变化到对应的对象实例上或者反之亦然。 相比起传统的 MVC 方法论来说，MVVM 更加强调减少代码量的同时提高可维护性和扩展能力；但由于缺乏内置的支持工具链（如 .NET 提供的相关特性），因此实际运用过程中可能还需要额外编写一些辅助函数才能达到理想效果[^2]。 --- #### 三、两者的主要差异对比 | 特性 | MVC | MVVM | |---------------------|-----------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------| | **核心概念** | 控制器驱动型 | 绑定驱动型 | | **职责划分** | 明确区分了控制流路径 | 增加了一层抽象 (ViewModel)，简化了视图逻辑 | | **复杂度** | 较低 | 对初学者而言稍显复杂 | | **灵活性/重用率** | 改变任何一个模块都可能导致其他两个模块也需要调整 | 修改任意一方几乎不会影响另外两方 | | **性能开销** | 几乎无明显增加 | 如果频繁触发大量数据更新，则可能会带来一定负担 | 值得注意的是，在某些情况下，为了弥补原生 API 功能上的不足之处，我们往往不得不手动模拟出类似的效果——这无疑增加了工作难度同时也降低了效率。 --- #### 四、适用场景分析 ##### （1）何时选用 MVC？ 当项目规模较小且不需要复杂的动态行为时，采用 MVC 就已经足够满足大部分需求了。它的优势在于简单直观易懂，非常适合快速原型制作阶段或是团队成员技术水平参差不齐的情况下使用。 ```csharp // 示例代码片段展示了如何在一个简单的游戏里应用 MVC 设计思路 public class PlayerController : MonoBehaviour { private PlayerModel _model; void Start() { _model = new PlayerModel(); } void Update() { if (Input.GetKeyDown(KeyCode.Space)) { _model.Jump(); // 调用模型的方法改变状态 } } } ``` ##### （2）为何考虑 MVVM? 对于那些追求极致用户体验并且希望充分利用平台特性的大型跨平台移动应用来讲，MVVM 往往能够发挥更大价值。尤其是在涉及到多线程异步加载资源或者是实时渲染动画特效之类高并发计算密集型任务的时候尤为突出。 然而需要注意的是，由于 Unity 并未像桌面端那样天然具备强大的 XAML/Databinding Frameworks 支撑体系结构，所以要想真正意义上做到无缝衔接的话还是存在不少挑战待克服。 --- #### 五、总结 综上所述，虽然两种方式各有千秋，但在选择之前务必要充分权衡当前项目的实际情况后再做决定。如果只是单纯想构建一个小而美的休闲小游戏那么毫无疑问应该优先推荐大家尝试一下轻量化易于掌握的 MVC 方案;但如果目标定位更高远一点比如说打造一款次世代级别的 AAA 大作则不妨大胆探索下更加先进的技术路线即引入 MVVM 来优化整体工程品质[^1]. ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值