说说你对MVVM的理解_Web前端

9条回答

那些年很冒险的梦。

2楼 · 2021-03-12 09:27

MVVM定义

MVVM是 Model-View-ViewModel的缩写，即模型-视图-视图模型。MVVM 是一种设计思想。

模型（Model）：数据保存—存放着各种数据，有的是固定写死的，大多数是从后端返回的数据
视图（View）：用户界面，也就是DOM
视图模型（View-Model）:连接View和Model的桥梁，当数据变化时，ViewModel够监听到数据的变化（通过Data Bindings），自动更新视图，而当用户操作视图，ViewModel也能监听到视图的变化（通过DOM Listeners），然后通知数据做改动，这就实现了数据的双向绑定。

MVVM流程图如下：

MVVM流程图

MVVM和 MVC 区别？

都是一种设计思想
MVC 后台用的多，MVC是Model-View-Controller的简写，即模型-视图-控制器。
MVC的目的就是将M和V 的代码分离
MVC是单向通信，也就是View和Model，必须通过Controller来承上启下
MVVM实现了View和Model的自动同步，当Model的属性改变时，不用再自己手动操作DOM元素，提高了页面渲染性能

灰机带翅膀

3楼 · 2021-03-12 09:58

MVVM(Model-View-ViewModel)是一种软件架构设计模式，它是一种简化用户界面的事件驱动编程方式。

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者。ViewModel是连接View和Model的中间件。

ViewModel能够观察到数据的变化，并对视图对应的内容进行更新。

ViewModel能够监听到视图的变化，并能够通知数据发生变化。

到此，我们就明白了，Vue.js就是一个MVVM的实现者，它的核心就是实现了DOM监听与数据绑定。

MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，其作用如下：

1、该层向上与视图层进行双向数据绑定。

2、向下与Model层通过接口请求进行数据交互。

MVVM已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当下流向的MVVM框架有Vue.js、AugularJS等。

我的网名不再改

4楼 · 2021-03-12 14:27

MVVM分为Model、View、ViewMode三者。

Model：代表数据模型，数据和业务逻辑都在Model层中定义；

View：代表UI视图，负责数据的展示；

ViewModel：负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；

Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系，因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。

这种模式实现了Model和View的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作dom。

在这里插入图片描述

我是大脸猫

5楼 · 2021-03-14 21:16

一直想聊聊这个话题，也有朋友跟我留言，让我讲讲MVVM，只可惜一直没整明白，不敢轻易下笔。针对MVVM，网上有很多不错的文章，比如MVVM介绍、被误解的 MVC 和被神化的 MVVM以及Look at MVVM from a different perspective等等

文章前我想先提几个问题

MVVM到底是什么？它和MVC有什么区别？
MVVM中VM到底是个什么角色？它和Controller或者Manager有什么区别？
ViewController在MVVM中扮演怎样角色？Api数据请求放在哪里？数据流向如何？

MVVM简介

关于MVVM，相信大家或多或少都有了解。引用MVVM介绍文中一图

受MVC或MVP架构的影响，对MVVM最初印象以为这是一个以ViewModel为核心，处理View和Model的开发架构。于是乎在原有MVC的基础上，创建了一个所谓的ViewModel对象，然后把ViewController中的代码移到ViewModel中，在ViewModel里面处理View以及Model的所有逻辑。毕竟大家都在说MVVM可以为ViewController瘦身，这ViewController就剩创建ViewModel的代码，嗯，够瘦身，这就是MVVM！

慢慢的，发现有什么地方不对，哪里不对？第一想法就是ViewController的定位，View？不是，Controller？也不是！毕竟它就创建ViewModel，好像与View、Model也没啥关系。抛开ViewController不谈，突然发现这样的ViewModel、Model以及View不就是MVC，一个以ViewModel为中心的MVC！

错在哪里

核心问题就在于对ViewModel角色的定位不清！基于MVVM设计思路，ViewModel存在目的在于抽离ViewController中展示业务逻辑，而不是替代ViewController，其它视图操作业务等还是应该放在ViewController中实现

既然不负责视图操作逻辑，ViewModel中就不应该存在任何View对象，更不应该存在Push/Present等视图跳转逻辑。因此，ViewModel中绝不应该存在任何视图操作相关的代码

@interface ViewModel : NSObject

// viewmodel中切不可存在view对象，更不该出现push或者present代码

- (instancetype)initWithTableView:(UITableView *)tableView;

@end

ViewModel做啥

很简单，处理视图展示逻辑，ViewModel负责将数据业务层提供的数据转化为界面展示所需的VO。其与View一一对应，没有View就没有ViewModel

比如，数据业务层传递一个含有性别属性sex的DO对象，0表示男， 1表示女。ViewModel的职责就是将其转化为展示层可显示的VO对象

1	self.personVO.sex = personDO.sex == 0 ? @"男": @"女";

ViewModel和View一起组成DDD(Model-Driven Design)领域驱动架构体系中的Presentation展示层。在iOS中，数据流向可以表示为ViewModel->ViewController->View，ViewController负责连接VO及其对应的View对象

领域驱动设计

领域驱动设计(DDD)对于安卓童鞋可能非常熟悉，有兴趣的童鞋可以参考这篇文章，本文不做过多讲解，借用其描述介绍几个名词

VO（View Object）：视图对象，用于展示层，它的作用是把某个指定页面（或组件）的所有数据封装起来
DO（Domain Object）：领域对象，就是从现实世界中抽象出来的有形或无形的业务实体
PO（Persistent Object）：持久化对象，它跟持久层（通常是关系型数据库）的数据结构形成一一对应的映射关系，如果持久层是关系型数据库，那么，数据表中的每个字段（或若干个）就对应PO的一个（或若干个）属性
Domain：领域驱动层，是用户与数据库交互的核心中转站，控制用户数据收集，控制请求转向等

MVVM架构中，ViewModel连接视图View和数据业务Model层，而Domain和Data数据持久层共同组成整个Model层。完整结构如图所示

Model并不表示Model

MVVM架构中的M，并不表示Model对象，而是表示整个数据业务层，对应DDD架构中的Domain层以及数据Data层。业务开发中，一般考虑Api或者DB对象，极少考虑Domain层设计，也不会区分DO或者PO对象。笼统定义Model ，将其传递给展示层ViewModel，久而久之，Model对象承载的信息越来越多，更有甚者，在Model中处理业务逻辑，导致项目维护成本增加，代码中出现if..else的概率也会越来越大

@interface PersonModel : NSObject

@property (nonatomic, assign) NSInteger sex;

@property (nonatomic, readonly) NSString *sexDescription;

@end

@implementation PersonModel

// model中不应该存在业务逻辑代码

- (NSString *)sexDescription {

return self.sex == 0 ? @"男": @"女";

}

@end

当然，Domain层并不是必须的，实际开发中，需要根据具体复杂度和需求来决定。比如只是纯粹的请求展示界面，设计过多的层次结构反而会增加项目的维护成本。同时，Domain层不应该存在任何状态变量！

Data数据层

ViewModel负责展示层逻辑，而Data层则对应数据层逻辑，一般以Manager或者Service身份存在，数据来源主要包括Api、DB或者Cache等。Data数据层操作对象主要为PO持久化对象，对象一旦创建，原则上不可修改

Data数据层具有独立可测试性，其不依赖视图层而存在。切记不可在Data层操作任何视图对象！

@implementation PersonDBAccess

// Data层不应该存在任何视图相关代码

- (NSArray *)fetchPersonModels {

[SVProgressHUD showWithStatus:@"加载中。。。"];

}

@end

文章到此，想必各位对MVVM架构已经有了大致了解。对比安卓童鞋对MVP架构的钟爱，iOS童鞋也许更加青睐MVVM，拌上ReactiveCocoa或者RxSwift，这道菜可以做的更加绚烂多彩！当然，正如唐巧在文中所言：ReactiveCocoa 和 MVVM 不应该被神化，我们需要保持的是一个拥抱变化的心，以及理性分析的态度。在新技术的面前，不盲从，也不守旧，一切的决策都应该建立在认真分析的基础上，这样才能应对技术的变化！

杨晓春

6楼 · 2021-03-18 08:43

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验，如Silverlight、音频、视频、3D、动画……，这导致了软件UI层更加细节化、可定制化。同时，在技术层面，WPF也带来了诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。

风火轮

7楼 · 2021-03-18 14:11

MVVM(Model-View-ViewModel)是一种软件架构设计模式，它是一种简化用户界面的事件驱动编程方式。

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者。ViewModel是连接View和Model的中间件。

ViewModel能够观察到数据的变化，并对视图对应的内容进行更新。

ViewModel能够监听到视图的变化，并能够通知数据发生变化。

到此，我们就明白了，Vue.js就是一个MVVM的实现者，它的核心就是实现了DOM监听与数据绑定。

MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，其作用如下：

1、该层向上与视图层进行双向数据绑定。

2、向下与Model层通过接口请求进行数据交互。

MVVM已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当下流向的MVVM框架有Vue.js、AugularJS等。

visonx

8楼 · 2021-03-19 10:13

MVVM(Model-View-ViewModel)是一种软件架构设计模式，它是一种简化用户界面的事件驱动编程方式。

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者。ViewModel是连接View和Model的中间件。

ViewModel能够观察到数据的变化，并对视图对应的内容进行更新。

ViewModel能够监听到视图的变化，并能够通知数据发生变化。

到此，我们就明白了，Vue.js就是一个MVVM的实现者，它的核心就是实现了DOM监听与数据绑定。

MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，其作用如下：

1、该层向上与视图层进行双向数据绑定。

2、向下与Model层通过接口请求进行数据交互。

MVVM已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当下流向的MVVM框架有Vue.js、AugularJS等。

孙哈哈

9楼 · 2021-03-19 20:01

MVVM的设计思想：关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把发者从操作DOM的繁琐步骤中解脱出来！

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

1 2 下一页