MVVM

最新推荐文章于 2025-07-15 17:12:34 发布
转载 最新推荐文章于 2025-07-15 17:12:34 发布 · 552 阅读 · 2

作者：蒋文豪
链接：https://www.zhihu.com/question/28893576/answer/42510822
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

要谈MVVM，我想是不能绕开MVC的。
MVC的出现是随着代码规模的上升而粗现的，问MVVM，我想题主对MVC已经有一定的了解了，MVC的前世今生就不展开了。

直接来看一个比较有代表性的MVC，如下图所示（因为职业的关系，图片来自apple开发者文档，不过大同小异）：
<img src="https://i-blog.csdnimg.cn/blog_migrate/7f48eacf720896c396ccc7756716f33c.png" data-rawwidth="850" data-rawheight="369" class="origin_image zh-lightbox-thumb" width="850" data-original="https://pic1.zhimg.com/ed944ca7a31ded0bc5ff80c6e5847e7c_r.jpg">

Model负责数据的处理，View负责视图的显示以及需要的监视，Controller用于流程控制。
基本的思想是：
View（界面）触发事件 –> Controller（业务）处理了业务，然后触发了数据更新;
或者
不知道谁更新了Model的数据–》Model（带着数据）通知View–》View更新数据。
逻辑清晰。

MVC带来了功能的独立，以及Model的复用，但三方依然是互相引用的，所以一个改进版的可能是这样（图片同样来自apple开发者文档）
<img src="https://i-blog.csdnimg.cn/blog_migrate/f8ecd2f4fb845d3f6e1d1c4337f0d65a.png" data-rawwidth="850" data-rawheight="367" class="origin_image zh-lightbox-thumb" width="850" data-original="https://pic2.zhimg.com/a80db04abccbaba91c5faaf217b4a085_r.jpg">这里的差别主要是取消了View和Model的耦合，Model发生变化时通知controller，由controller来更新view。

这里的差别主要是取消了View和Model的耦合，Model发生变化时通知controller，由controller来更新view。

在这两种里面，在理想上设计的很美好，优点一大堆，在实际中，却有几个不尽如人意的地方，其中最大的问题，在于Controller的臃肿：
负责View的布局、加载、展示顺序，
View的logic，
要负责连接View和Model，
负责多种事件响应
。。。。。

目前为止，我见过的最多的Controller类，有超过6k行代码，里面的功能过多，调来调去，牵一发而动全身，测试和维护极为困难。

除此之外，有些逻辑，诸如网络请求、数据校验这样的logic放在Controller还是Model中，似乎在不同的代码中有着不同的答案。

在我看来，MVVM就是为了解决这两个问题，Controller的高度臃肿和logic位置的模棱两可。
一个典型的MVVM如下图所示（自己画的，凑合看看）：
<img src="https://i-blog.csdnimg.cn/blog_migrate/7dcda43ef8241bf9c0971a1bcdf3758f.png" data-rawwidth="1376" data-rawheight="222" class="origin_image zh-lightbox-thumb" width="1376" data-original="https://pic4.zhimg.com/75260b123a7204649cb5bb06dd35bf27_r.jpg">这里多出来了一个ViewModel，那代码多出来多少呢？

这里多出来了一个ViewModel，那代码多出来多少呢？

很少。
由于View和Controller终于正式在一起了，这个ViewModel就是MVC的Controller中除了view展示和事件响应之外的诸如业务逻辑、网络请求、合法性校验这些代码组成的，这些代码本来就是要写的。正因为如此，从MVC切到MVVM像

大神说的，M层是不用动的哟。

说白了，这是Model层对Controller层的适配器，Controller调用Model、发起网络请求、从Model取出的字符串要本地化、检查View中输入的Email是否合法等等这些，全部放在VM（ViewModel）中。题主的问题，也就有答案了吧。

至于MVVM的好处，一是Controller的瘦身，二是ViewModel的复用和良好的可测试性，这些代码能复用真实爽歪歪了，第三是一个隐藏属性，如果你使用响应式编程的话，代码量会明显减少（在iOS上使用ReactiveCocoa和MVVM，代码量可以减少30%左右）。

欢迎指正。
qt-mvvm：大型Qt C ++应用程序的模型视图ViewModel框架
02-13
大型C ++ Qt应用程序的模型视图ViewModel框架 概述 这个model-view-viewmodel框架旨在用于使用C ++编写的基于Qt的大型科学应用程序。 该项目是作为GUI重构的游乐场而创建的。 该框架的主要特点是： 用于存储GUI会话的任意数据的应用程序模型。 将应用程序模型序列化为json。 根据命令模式撤消/重做。 查看模型以显示Qt小部件中的部分应用程序模型。 取决于Qt。 基于科学绘图。 根据模型内容自动生成窗口小部件。 物业编辑。 Qt的树木和桌子的灵活布局。 要求 C ++-17 CMake的3.14 Qt 5.12 安装说明 git clone --recurse-submodules https://github.com/gpospelov/qt-mvvm.git mkdir <build>; cd <build>
Qt MVVM：大型Qt C++应用程序的模型视图ViewModel框架
gitblog_09805的博客
10-17 1198
Qt MVVM：大型Qt C++应用程序的模型视图ViewModel框架 去发现同类优质开源项目:https://gitcode.com/ 概述 qt-mvvm 是一个专为大型C++ Qt应用程序设计的模型视图ViewModel（MVVM）框架。该框架旨在用于基于Qt的大型科学应用程序，特别适用于需要复杂GUI交互和数据管理的场景。该项目最初是作为GUI重构的实验性项目而创建的，其主要特点包括： ...
【Qt】 设计模式
最新发布
weixin_47564581的博客
07-15 502
本文介绍了Qt开发中常用的设计模式及其应用场景。MVC/MVVM模式用于数据与界面分离，单例模式管理全局资源如数据库连接，观察者模式通过信号槽实现对象间通信。工厂模式动态创建数据库连接，命令模式封装数据库操作支持撤销功能，状态模式处理网络连接等状态切换。这些模式结合Qt特性（信号槽、模型视图等），可有效提升代码可维护性和扩展性，适用于数据库操作、通信模块和界面逻辑等场景。
【Qt】Qt 中实现MVVM（Model-View-ViewModel）
weixin_43510208的博客
06-03 424
Model：管理数据和业务逻辑ViewModel：暴露数据和方法供View绑定，封装状态转换View：UI展示层（QML或Widgets），通过绑定与ViewModel交互
探索Qt MVVM：为大型C++ Qt应用程序注入新活力
gitblog_09820的博客
10-28 362
探索Qt MVVM：为大型C++ Qt应用程序注入新活力 去发现同类优质开源项目:https://gitcode.com/ 项目介绍 在现代软件开发中，大型应用程序的复杂性日益增加，尤其是在科学计算和数据可视化领域。为了应对这一挑战，qt-mvvm应运而生。这是一个专为大型C++ Qt应用程序设计的模型视图ViewModel（MVVM）框架，旨在简化复杂GUI交互和数据管理的开发流程。qt-mvv...
QtMvvm：面向Qt的面向mvvm的库，用于并行创建Widget和Quick项目
02-05
QtMvvm 用于Qt的面向mvvm的库，用于并行创建Widget和Quick Controls 2项目。 有关更多图像，请检查“ 产品特点 QtMvvm的主要功能是ui和逻辑之间的分隔。 使用此库，您可以创建一个包含您的应用程序逻辑以及ui控制器（称为“ ViewModels”）的核心库，并在其之上创建多个ui项目。 这样，您可以例如同时提供小部件和基于qt quick的应用程序，或者为不同的设备创建不同的ui，而无需编写任何代码两次。 主要功能是： 在核心应用程序中创建ViewModels以准备要呈现的数据而无需绑定到任何具体的GUI 支持单例ViewModel 支持容器Vie
MVVM（GalaSoft.MvvmLight）简单小项目和其它MVVM框架（CommunityToolkit.Mvvm）
10-09
MVVM（Model-View-ViewModel）是一种软件架构设计模式，它是实现视图和模型分离的一种方式，广泛应用于现代桌面应用程序和移动应用程序中。MVVM模式由微软的一些开发者提出，旨在简化基于Windows Presentation ...
MVVM案例Demo示例
09-01
**MVVM模式详解** MVVM（Model-View-ViewModel）是一种软件设计模式，广泛应用于现代UI开发，尤其是在WPF、Xamarin、Angular、React以及Vue等框架中。它源自MVC（Model-View-Controller）模式，但在UI层面上进行了...
Android mvvm 框架，最流行的mvvm demo
09-23
在Android开发领域，MVVM（Model-View-ViewModel）架构模式已经成为了现代应用程序设计的主流选择。本项目“Android mvvm 框架，最流行的mvvm demo”旨在提供一个无bug的示例，帮助开发者深入理解并实践MVVM框架在...
C#MVVM架构 简单实例可以运行
02-06
**C# MVVM架构简介** MVVM（Model-View-ViewModel）是一种软件设计模式，尤其在开发WPF、UWP和Xamarin等基于.NET Framework的桌面应用或移动应用时广泛应用。该模式源自经典的MVC（Model-View-Controller）模式，但...
dotnet-communitytoolkit-mvvm
08-11
dotnet-communitytoolkit-mvvm CommunityToolkit.Mvvm 是一个现代、快速且模块化的 MVVM 库，作为 .NET 社区工具包的一部分。它围绕以下原则构建：平台和运行时独立、易于选取和使用、点菜自由选择要使用的组件、...
QtMvvm_notes.zip
04-16
multi-platform(android,windows,ios,mac,linux) qt note demo using qml, qml plugin, c++ and sqlite with mvvm framework (一个用qt quick写的笔记本demo程序），工程要用qt creator打开, qt 5.13编译通过
【Qt QML】MVVM （Model-View-ViewModel Pattern）框架
wangyi463295828的博客
06-09 2410
在交互层次上，视图“了解”视图模型，视图模型“了解”模型，但模型不知道视图模型，而视图模型不知道视图。因此，视图模型将视图与模型隔离开来，并允许模型独立于视图进行演变。有效使用 MVVM 的关键在于了解如何将应用代码分解为正确的类以及这些类的交互方式。下面几节讨论 MVVM 模式中每个类的责任。
Qt实现简单的mvvm设计架构（笔记）
i_forever_的博客
04-01 3384
应用最基础的mvvm架构
界面架构 - MVVM (Qt)
強雲的博客
04-02 1361
在上述 MVVM 示例中：ViewModel 封装了业务逻辑（计算字符串长度），并通过 Q_PROPERTY 暴露输入文本（inputText）和计算结果（result）。当用户操作界面时，ViewModel 中的数据会更新，并通过信号通知 QML 自动刷新界面。View（QML 部分） 仅负责界面展示和用户交互，通过数据绑定与 ViewModel 建立联系。这样 View 完全不关心具体的业务逻辑，降低了耦合度。
qt-mvvm代码分析
国产CAx(CAD/CAE/CAM)软件研发
08-28 4415
qt-mvvm是GitHub上一套基于Qt的MVVM框架。本文旨在分析qt-mvvm的实现过程，来深入研究MVVM的实现要点。
MVVM模式理解(基于Qt分析)
CHNIM的博客
06-18 1828
MVVM（Model-View-ViewModel）软件框架可以有效分离用户界面和业务逻辑，提升代码的可维护性和可测试性。下面我们简要的实现一个MVVM框架示例，并说明其特点和优势。
Windows下编译qt-mvvm
国产CAx(CAD/CAE/CAM)软件研发
08-20 1311
qt-mvvm是GitHub上一套基于Qt的MVVM开发框架。
Qt-MVVM开源项目指南及问题解决方案
gitblog_01213的博客
10-18 932
Qt-MVVM开源项目指南及问题解决方案 项目基础介绍 Qt-MVVM 是一个专为大型C++ Qt应用程序设计的Model-View-ViewModel（MVVM）框架。它旨在提供一种高效的方式来管理科学应用中的数据与界面交互。此框架基于C++17开发，并且要求CMake版本不低于3.14以及Qt版本5.12以上。通过集成qcustomplot进行科学绘图，Qt-MVVM简化了复杂应用的UI开发，...
mvvm
06-06
<think>首先，用户的问题是关于MVVM架构模式的介绍、实现和使用。系统级指令要求我使用中文回答，并且要结构化清晰。我需要参考用户提供的站内引用，这些引用来自不同的来源：[1]关于Android的MVVM架构，[2]关于Vue的MVVM架构，[3]关于MVVM模式的基本概念，[4]关于MVVM的使用和实现。引用内容摘要：-[^1]:MVVM是一种架构模式，DataBinding是实现数据和UI绑定的框架，LifeCycle和LiveData是桥梁。-[^2]:Vue的MVVM模式：VM通过双向数据绑定实现模型和视图的自动同步，包括DOMListener和DataBinding。-[^3]:View包括Activity/Fragment和ViewDataBinding。-[^4]:MVVM在Android中使用布局文件（如XML），定义数据绑定。用户上一次的问题似乎是要我生成相关问题，但当前用户的问题是明确问关于MVVM的介绍、实现和使用。所以我应该专注于回答这个。我的回答结构：1.**介绍MVVM架构模式**：简要解释什么是MVVM，核心组成部分（Model,View,ViewModel），优缺点。2.**实现细节**：根据引用，讨论Android和Vue中的MVVM实现。3.**使用场景和示例**：展示如何使用，包括代码片段（如果有），如Android中使用DataBinding或Vue中的实现。4.**生成相关问题**：如示例所示，在末尾添加相关问题。系统指令要求：-行内数学表达式用$...$，但在这个上下文中可能不涉及数学，所以不必要。-独立公式用$$...$$，但这里没有。-LaTeX语法正确：在代码块中使用。-中文回答。-生成相关问题：在末尾添加。-引用段落末尾添加引用标识，如[^1]。回答大纲：-**开头**：简要介绍MVVM。-**核心概念**：-Model：数据层。-View：UI层。-ViewModel：业务逻辑层，连接Model和View。-双向数据绑定：核心机制。-**实现**：-Android实现（引用[1]、[3]、[4]）：使用DataBinding,LifeCycle,LiveData。-Vue实现（引用[2]）：数据挟持和发布订阅模式。-**使用**：给出示例代码，如Android布局文件或Vue组件。-**优点与缺点**。-**生成相关问题**。确保回答真实可靠：基于已知知识，参考给定引用。生成相关问题：如：1.MVVM与MVC的区别是什么？2.在实际项目中如何解决MVVM中的数据绑定问题？3.Vue.js和Android中MVVM实现的差异？引用时，在相关内容末尾添加[^1],[^2]等。</think> ### MVVM架构模式介绍、实现与使用 MVVM（Model-View-ViewModel）是一种广泛应用于现代软件开发的架构模式，旨在将用户界面（UI）与业务逻辑解耦，提升代码的可维护性和可测试性。它源于MVC（Model-View-Controller）模式，但引入了ViewModel作为中间层，并通过双向数据绑定自动同步View和Model的变化。以下我将逐步介绍MVVM的核心概念、具体实现和使用方法。 --- #### 1. **MVVM核心介绍** - **核心组成部分**： - **Model（模型）**：代表应用程序的数据和业务逻辑层。负责处理数据获取、存储和业务规则。例如，数据库操作、API调用等。 - **View（视图）**：用户界面的呈现层。在Android中是Activity/Fragment，在Web开发中是HTML DOM元素[^3]。View不包含逻辑，只负责显示数据和处理用户输入。 - **ViewModel（视图模型）**：连接Model和View的桥梁。ViewModel暴露数据和方法给View，并响应View的交互事件。它处理UI逻辑但不直接操作View，使用LiveData（在Android）或响应式数据（在Vue）实现数据更新自动化[^1][^2]。 - **双向数据绑定**：MVVM的核心机制。当Model数据变化时，View自动更新；当用户操作View时，Model数据自动同步。这减少了冗余代码，提升开发效率[^2][^4]。 - **优缺点**： - **优点**：解耦UI和逻辑，易于测试（ViewModel可独立测试）；提高代码复用性；支持响应式UI更新。 - **缺点**：双向绑定可能导致调试复杂（需注意数据流循环）；在大型应用中，ViewModel可能过于庞大。 引用[^1]中提到，MVVM的核心在于使用工具如DataBinding和LifeCycle实现数据绑定，LiveData通过感知生命周期来安全传递数据，确保UI仅在可见状态下更新，避免内存泄漏[^1]。 --- #### 2. **MVVM的实现细节** MVVM的实现依赖于框架和平台，下面以Android（使用Jetpack组件）和Vue.js为例。 - **Android中的实现（参考引用[1][3][4]）**： - **工具链**：使用Jetpack库（如LifeCycle、LiveData和DataBinding）。ViewModel处理业务逻辑，LiveData确保数据在UI控制器（如Activity）的生命周期内安全更新[^1][^3]。 - **DataBinding使用**：在XML布局文件中定义数据和绑定关系，DataBinding自动将ViewModel数据映射到UI元素[^4]。示例代码： ```xml <!-- 引用[4]的布局示例 --> <layout xmlns:android="http://schemas.android.com/apk/res/android"> <data> <variable name="user" type="com.example.User" /> <!-- 定义数据类型 --> </data> <TextView android:text="@{user.name}" /> <!-- 绑定表达式 --> </layout> ``` 这里，`@{user.name}` 是绑定表达式，当User对象name属性变化时，TextView自动刷新[^4]。 - **ViewModel和LiveData**：ViewModel保持数据状态，LiveData观察数据变化。在Activity中： ```kotlin class MyViewModel : ViewModel() { val userName = MutableLiveData<String>() // LiveData用于数据观察 fun loadData() { userName.value = "加载的数据" // 更新数据自动通知View } } class MyActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val binding = DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main) val viewModel = ViewModelProvider(this).get(MyViewModel::class.java) viewModel.userName.observe(this) { name -> // 观察数据变化 binding.textView.text = name // UI更新 } } } ``` 此代码中，当ViewModel数据变化时，View通过LiveData自动更新[^1]。 - **Vue.js中的实现（参考引用[2]）**： - **核心机制**：Vue通过数据挟持（使用Object.defineProperty或Proxy）和发布者-订阅者模式实现双向绑定[^2]。 - **ViewModel组成部分**： - **DOMListener**：监听用户交互事件（如点击），触发Model更新。 - **DataBinding**：将Model数据绑定到View元素，实现数据自动同步。 - 示例代码（Vue组件）： ```vue <template> <div> <p>{{ userName }}</p> <!-- 绑定表达式，自动更新 --> <input v-model="userName"> <!-- 双向绑定：输入变化自动更新Model --> </div> </template> <script> export default { data() { return { userName: '默认值' // ViewModel数据 } } } </script> ``` 这里，`v-model`实现输入框的双向绑定：输入变化更新数据，数据变化更新视图[^2]。 **关键区别**：Android MVVM强调生命周期感知（通过LifeCycle），而Vue.js更侧重于纯前端绑定[^1][^2]。 --- #### 3. **MVVM的使用场景和最佳实践** - **使用场景**： - **移动App开发**：如Android项目，MVVM适合处理UI复杂性和数据异步更新（如API响应）。 - **Web前端开发**：Vue、React等框架广泛应用MVVM模式，适合动态单页应用（SPA）。 - **企业应用**：在需要高代码复用性和测试性的场景中，MVVM减少维护成本。 - **最佳实践**： - **保持ViewModel轻量**：将复杂逻辑移至Model层，避免ViewModel成为"God Object"。 - **合理使用数据绑定**：避免过度绑定以减少性能开销，如在Android中使用`@BindingAdapter`处理自定义绑定[^4]。 - **测试策略**：单元测试ViewModel逻辑（使用JUnit/Mockito），UI测试聚焦用户交互。 - **常见问题解决**： - **内存泄漏**：在Android中，使用LifeCycleScope确保资源释放。 - **数据流循环**：在Vue中，避免在数据更新方法中直接修改源数据。 引用[^3]强调，View中的ViewDataBinding（如Android的binding实例）是执行数据绑定的关键，但开发者只需关注数据定义和响应逻辑[^3]。 --- #### 4. **MVVM的优缺点总结** - **优势**：提升开发效率（通过自动UI更新），支持模块化开发；缺点在调试复杂数据流。 - **趋势**：在现代框架如Jetpack Compose或Vue 3中，MVVM通过更精简的API优化了实现[^2][^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值