MVVM

最新推荐文章于 2022-06-25 22:11:52 发布
最新推荐文章于 2022-06-25 22:11:52 发布
阅读量135 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： ui 测试 设计模式
原文链接：http://www.cnblogs.com/zhugenqiang/archive/2011/09/30/2196235.html
MVVM是Model-View-ViewModel的简写。
　　 微软的WPF带来了新的技术体验，如Sliverlight、音频、视频、3D、动画……，这导致了 软件UI层更加细节化、可定制化。同时，在技术层面，WPF也带来了 诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性揉合进去，以应对客户日益复杂的需求变化。
　　WPF的数据绑定与Presentation Model相集合是非常好的做法,使得开发人员可以将View和逻辑分离出来,但这种数据绑定技术非常简单实用，也是WPF所特有的，所以我们又称之为Model-View-ViewModel(MVVM)。这种模式跟经典的MVP（Model-View-Presenter）模式很相似，除了你需要一个为View量身定制的model，这个model就是ViewModel。ViewModel包含所有由UI特定的接口和属性，并由一个 ViewModel 的视图的绑定属性，并可获得二者之间的松散耦合，所以需要在ViewModel 直接更新视图中编写相应代码。数据绑定系统还支持提供了标准化的方式传输到视图的验证错误的输入的验证。
　　在视图（View）部分，通常也就是一个Aspx页面。在以前设计模式中由于没有清晰的职责划分，UI 层经常成为逻辑层的全能代理，而后者实际上属于 应用程序的其他层。MVP 里的M 其实和MVC里的M是一个，都是封装了核心数据、逻辑和功能的计算关系的模型，而V是视图（ 窗体），P就是封装了窗体中的所有操作、响应用户的输入输出、事件等，与MVC里的C差不多，区别是MVC是系统级架构的，而MVP是用在某个特定页面上的，也就是说MVP的灵活性要远远大于MVC，实现起来也极为简单。
　　我们再从IView这个interface层来解析，它可以帮助我们把各类UI与逻辑层解耦，同时可以从UI层进入自动化测试自动化测试（Unit/Automatic Test）并提供了入口，在以前可以由WinForm/Web Form/MFC等编写的UI是通过事件Windows消息与IView层沟通的。WPF与IView层的沟通，最佳的手段是使用Binding，当然，也可以使用事件；Presenter层要实现IView， 多态机制可以保证运行时UI层显示恰当的数据。比如Binding，在程序中，你可能看到Binding的Source是某个interface类型的变量，实际上，这个interface变量引用着的对象才是真正的数据源。
　　MVC模式大家都已经非常熟悉了，在这里我就不赘述，这些模式也是依次进化而形成MVC—>MVP—>MVVM。有一句话说的好：当物体受到接力的时候，凡是有界面的地方就是最容易被撕下来的地方。因此，IView作为公共视图接口约束（契约）的一层意思；View则能传达解耦的一层意思。
　　下面介绍一下MVVM设计模式。因为WPF技术出现，从而使MVP设计模式有所改进，MVVM 模式便是使用的是数据绑定基础架构。它们可以轻松构建UI的必要元素。
　　可以参考The Composite Application Guidance for WPF(prism)
　　View绑定到ViewModel，然后执行一些命令在向它请求一个动作。而反过来，ViewModel跟Model通讯，告诉它更新来响应UI。这样便使得为应用构建UI非常的容易。往一个应用程序上贴一个界面越容易，外观 设计师就越容易使用Blend来创建一个漂亮的界面。同时，当UI和功能越来越松耦合的时候，功能的可测试性就越来越强。
　　在 MVP模式中，为了让UI层能够从逻辑层上分离下来，设计师们在UI层与逻辑层之间加了一层interface。无论是UI开发人员还是数据开发人员，都要尊重这个契约、按照它进行设计和开发。这样，理想状态下无论是Web UI还是Window UI就都可以使用同一套数据逻辑了。借鉴MVP的IView层，养成习惯。View Model听起来比Presenter要贴切得多；会把一些跟事件、命令相关的东西放在Controler里。

转载于:https://www.cnblogs.com/zhugenqiang/archive/2011/09/30/2196235.html

MVVM架构模式简介
weixin_31188147的博客
01-02 1424
在这个MVVM示例中，视图通过Vue的。
MVVM（GalaSoft.MvvmLight）简单小项目和其它MVVM框架（CommunityToolkit.Mvvm）
10-09
MVVM（Model-View-ViewModel）是一种软件架构设计模式，它是实现视图和模型分离的一种方式，广泛应用于现代桌面应用程序和移动应用程序中。MVVM模式由微软的一些开发者提出，旨在简化基于Windows Presentation ...
mvvm是什么？
mzrxLXR的博客
08-10 1549
问题网址 : http://bbs.daxiangclass.com/?thread-38.htm MVVM是什么? MVVM是Model-View-ViewModel 的 缩写,MVVM是一种设计思想.vue就是用这种设计模式,实现了视图和数据分类 MVVM主要实现的页面和数据的同步,当View改变是把数据同步到Model当 Model改变是将数据同步更新到View Model层代表...
MVVM模型
weixin_64105376的博客
03-21 3069
大名鼎鼎的MVVM模型来了 一、什么是MVVM模型 MVVM即model-view-ModelView，首先我们分开来看model意思就是模板，负责数据的存储还有业务逻辑，第二层是view是视图层，主要工作是负责展示model中的数据，第三层view-model层是负责连接model层以及view层的中间人，具有双向绑定，自动更新视图的功能，在vue中就是vue实例。 这就是mvvm各层以及各层的主要工作 二、MVVM以及MVC MVVM实现了前后端更好的分离作用，提升了效率 我们都知道mvvm
MVVM简介
weixin_40624876的博客
04-20 4854
引言 mvvm架构是继mvc架构后衍生出的一个新的架构思想，在平时工作过程中很多同学都是把mvvm和dataBinding混为一团，只要被问到什么是mvvm就回答：“mvvm就是dataBinding”。其实这种理解是错的。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。本文就针对mvvm阐述下个人的理解，有不足支出多多谅解。 一、什么是mvvm mvvm即 model-viewModel-view 的缩写，view层的布局控件和m
MVVM的理解
weixin_47227886的博客
04-14 4571
MVVM 是 Model-View-ViewModel 的缩写。 Model:代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。 View: 代表UI 组件，它负责将数据模型转化成UI 展现出来。 ViewModel: 监听数据模型的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过Vie...
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 社区工具包的一部分。它围绕以下原则构建：平台和运行时独立、易于选取和使用、点菜自由选择要使用的组件、...
MVVM模式模型－视图－视图模型（Model-View-ViewModel）
06-20
组成部分Model、View、ViewModel，程序=数据结构+算法。Model就是数据结构，ViewModel实现算法数据处理，View实现数据展现。 View：UI界面 ViewModel：它是View的抽象，负责View与Model之间信息转换，将View的Command传送到Model； Model：数据层 View与ViewModule连接可以通过下面的方式 Binding Data：实现数据的传递 Command：实现操作的调用 AttachBehavior：实现控件加载过程中的操作 View没有大量代码逻辑。结合WPF、Silverlight绑定机制，MVP演变出了MVVM，充分利用了WPF、Silverlight的优势，将大量代码逻辑、状态转到ViewModel， 可以说MVVM是专门为WPF、Silverlight打造的。 View绑定到ViewModel，然后执行一些命令在向它请求一个动作。而反过来，ViewModel跟Model通讯，告诉它更新来响应UI。 这样便使得为应用构建UI非常的容易。往一个应用程序上贴一个界面越容易，外观设计师就越容易使用Blend来创建一个漂亮的界面。 同时，当UI和功能越来越松耦合的时候，功能的可测试性就越来越强。
C#学习笔记-WPF之MVVM框架
云淡风气半浮生
09-30 3618
1、定义 MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。 M:Model（模型）数据模型，用来存储数据 V:View（UI界面） VM:View（ViewModel） 2、设计一个简单的MVVM模型 2.1基础类（继承INotifyPropertyChanged） 当数据属性发生变化时，使UI界面能同步...
什么是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是什么?
junny_zz的博客
06-25 1658
mvvm
MVVM模式介绍
weixin_34402408的博客
03-12 314
 MVVM：模型－视图－视图模型（Model-View-ViewModel） 　  组成部分Model、View、ViewModel  View：UI界面 ViewModel：它是View的抽象，负责View与Model之间信息转换，将View的Command传送到Model；  Model：数据访问层 View与ViewModule连接可以通过下面的方式 Binding Data：实...
什么是mvvm？
weixin_33712987的博客
06-23 461
MVVM是Model-View-ViewModel的缩写。mvvm是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Mode...
什么是MVVM?
weixin_51348217的博客
01-28 5910
什么是MVVM? MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。 View层是视图层，也就是用户界面。前端主要由HTML和CSS来构建； Model层 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，对于前端来说就是后端的提供的API接口； ViewModel层是视图数据层，一个同步View和Model的对象。 在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的，因此Vi
mvvm实现原理总结（数据劫持，数据代理，订阅者发布者模式）
zpcqdkf的博客
09-04 508
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。vue中采用的数据劫持+ 发布者订阅者模式 https://blog.csdn.ne...
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、付费专栏及课程。

余额充值