MVVM

视图➡视图模型➡模型

视图有对ViewModel的引用，反之则没有。 ViewModel有对模型的引用，反之则没有。 视图没有对模型的引用，反之亦然。

如果你正在使用一个控制器，它可以有一个视图和视图模型的引用，尽管控制器并不总是必要的，就像在SwiftUI中演示的那样。 数据绑定:我们为ViewModel属性创建侦听器，这样数据就可以通过视图模型从视图流向模型。虽然这些引用是单向的:View↔ViewModel↔Model，但数据需要流动:View↔ViewModel。视图如何通过读取自己的属性从模型中获取数据是很清楚的。数据绑定是如何在视图中检测事件并将它们反馈给模型。

class CustomView: UIView {
  var viewModel = MyViewModel {
    didSet {
      self.color = viewModel.viewColor
    }
  }

  convenience init(viewModel: MyViewModel) {
    self.viewModel = viewModel
  }
}


struct MyViewModel {
   var viewColor: UIColor {
      didSet {
         colorChanged?() // This is where the binding magic happens.
      }
   }
   
   var colorChanged: ((UIColor) -> Void)?
}


class MyViewController: UIViewController {

   let myViewModel = MyViewModel(viewColor: .green)
   let customView: CustomView!

   override func viewDidLoad() {
      super.viewDidLoad()

      // This is where the binder is assigned.
      myViewModel.colorChanged = { [weak self] color in 
        print("wow the color changed")
      }
      customView = CustomView(viewModel: myViewModel)
      self.view = customView
   }
}

设置的差异

业务逻辑保存在MVC的控制器中，MVVM的ViewModels中。 在MVC中，事件直接从视图传递到控制器，而在MVVM中，事件从视图传递到ViewModel再到控制器(如果有的话)。

共同的特征

MVVM和MVC都不允许视图直接向模型发送消息。 两者都有自己的模型。 两人都有自己的观点。

MVVM的优点

因为viewmodel包含业务逻辑，所以它们是更小的具体对象，便于进行单元测试。另一方面，在MVC中，业务逻辑在ViewController中。如果不同时测试所有的方法和侦听器，你怎么能相信视图控制器的单元测试是全面安全的呢?您不能完全相信单元测试结果。 在MVVM中，由于业务逻辑从控制器中被抽取到原子ViewModel单元中，ViewController的大小缩小了，这使得ViewController代码更加清晰。

MVC的优点

在控制器中提供业务逻辑减少了对分支的需求，因此语句更有可能在缓存上运行，这比将业务逻辑封装到ViewModels中性能更好。 在一个地方提供业务逻辑可以加速不需要测试的简单应用程序的开发过程。我不知道什么时候不需要检查。 对于新开发人员来说，在ViewController中提供业务逻辑更容易考虑。

MVVM模型-视图视图模型类似于MVC，模型-视图控制器

控制器被替换为ViewModel。ViewModel位于UI层下面。ViewModel公开视图所需的数据和命令对象。你可以把它想象成一个容器对象视图从它那里获取数据和动作。ViewModel从模型中提取数据。

Russel East写了一篇博客，详细讨论了为什么MVVM不同于MVC

对于不太熟悉架构模式主题的人来说，其他答案可能不太容易理解。对应用程序架构不熟悉的人可能想知道它的选择在实践中如何影响她的应用程序，以及在社区中有什么大惊小怪的。

为了更好地解释上述问题，我编写了这个涉及MVVM、MVP和MVC的剧本。故事开始于一个用户点击电影搜索应用程序中的“FIND”按钮…

用户:单击…

观点：那是谁？[MVVM|MVP|MVC]

用户:我只是点击了搜索按钮……

视图:好的，稍等... .(MVVM MVP | | MVC)

(视图调用ViewModel|Presenter|Controller…)

视图:嘿，ViewModel|Presenter|Controller，一个用户刚刚点击了搜索按钮，我该怎么做?(MVVM MVP | | MVC)

ViewModel|Presenter|Controller:嘿View，这个页面上有搜索词吗?(MVVM MVP | | MVC)

查看:是的，…在这里…" piano " [MVVM|MVP|MVC]

这是MVVM和MVP|MVC之间最重要的区别

演示者|控制器:谢谢视图，…同时我正在模型上查找搜索词，请给他/她一个进度条[MVP|MVC]

(演示者|控制器正在调用模型…)

ViewModel:谢谢，我会在模型上查找搜索词，但不会直接更新你。相反，如果有任何结果，我将触发事件来searchResultsListObservable。所以你最好仔细观察一下。(MVVM)

(当在searchResultsListObservable中观察任何触发器时，视图认为它应该向用户显示一些进度条，因为ViewModel不会在那上面与它对话)

——————————————————————————————

ViewModel|演示者|控制器:嘿，模型，你有匹配这个搜索词吗?: " piano " [MVVM|MVP|MVC]

Model: Hey ViewModel|Presenter|Controller, let me check…[MVVM|MVP|MVC]

(模型正在向电影数据库查询…)[MVVM|MVP|MVC]

(过了一会儿……)

————这是MVVM, MVP和MVC————-之间的分歧点

模型:我为你找到了一个列表，ViewModel|Presenter，这里是JSON“[{" name ": "钢琴老师"，"年份":2001}，{" name ": "钢琴"，"年份":1993}]" [MVVM|MVP]

模型:有一些结果可用，控制器。我已经在我的实例中创建了一个字段变量，并将其填充为结果。它的名字是searchResultsList [MVC]

(演示者|控制器感谢模型并返回视图)[MVP|MVC]

主持人:感谢您的等待，View，我为您找到了匹配结果的列表，并将它们以像样的格式排列:["钢琴老师2001″，"钢琴1993 "]。同时，现在请隐藏进度条[MVP]

控制器:感谢等待视图，我已经询问了模型关于你的搜索查询。它说它已经找到了一个匹配结果列表，并将它们存储在其实例内名为“searchResultsList”的变量中。你可以从那里得到它。同时，现在请隐藏进度条[MVC]

ViewModel: searchResultsListObservable上的任何观察者都将被通知有这样一个像样格式的新列表:[" Piano Teacher 2001″，" Piano 1993 "]。

视图:非常感谢主讲人[MVP]

视图:谢谢你“控制器”[MVC](现在视图在问自己:我应该如何将我从模型得到的结果呈现给用户?电影的制作年份是先写还是后写?)

视图:哦，在searchResultsListObservable中有一个新的触发器…，很好，有一个像样的列表，现在我只需要在列表中显示它。有了结果之后，我还应该隐藏进度条。(MVVM)

如果你感兴趣，我在这里写了一系列文章，通过实现一个电影搜索android应用程序来比较MVVM、MVP和MVC。

我认为要理解这些首字母缩略词的意思，最简单的方法就是暂时忘掉它们。相反，想想它们源自的软件，每一个软件。这实际上可以归结为早期网络和桌面之间的区别。

在2000年代中期，随着复杂性的增长，MVC软件设计模式(在20世纪70年代首次被描述)开始应用于web应用程序。想想数据库、HTML页面和中间的代码。让我们稍微改进一下以达到MVC:对于»database«，让我们假设数据库加接口代码。对于»HTML页面«，让我们假设HTML模板加上模板处理代码。对于»code inbetween«，让我们假设代码将用户单击映射到操作，可能会影响数据库，肯定会显示另一个视图。就是这样，至少为了比较的目的是这样的。

让我们保留这个网页的一个特性，不是像今天那样，而是像十年前那样，当时JavaScript还是一个低级的、卑鄙的烦恼，真正的程序员很好地避开了:HTML页面本质上是愚蠢和被动的。浏览器是一个瘦客户机，或者可以说是一个穷客户机。浏览器中没有智能。整页重载规则。每次都会重新生成»view«。

让我们记住，尽管这种网络方式风靡一时，但与桌面相比，它是非常落后的。桌面应用程序是胖客户端，也可以说是富客户端。(甚至像Microsoft Word这样的程序也可以被视为某种客户端，文档客户端。)他们是充满智慧的客户，对自己的数据了如指掌。他们是有状态的。它们在内存中缓存正在处理的数据。没有整页重载这种废话。

这种富桌面方式可能就是第二个首字母缩写MVVM的起源。不要被字母所迷惑，也不要被c的省略所迷惑。他们必须如此。没有东西被移除。我们只增加了一件事:状态性，缓存在客户端上的数据(以及处理这些数据的智能)。该数据(本质上是客户机上的缓存)现在被称为»ViewModel«。它允许丰富的交互性。就是这样。

MVC =模型、控制器、视图=本质上的单向通信=交互性差 MVVM =模型、控制器、缓存、视图=双向通信=丰富的交互性

我们可以看到，通过Flash、Silverlight，以及最重要的JavaScript, web已经拥抱了MVVM。浏览器不能再被合法地称为瘦客户机。看看它们的可编程性。看看他们的内存消耗。看看现代网页上所有的Javascript交互。

就我个人而言，我发现这个理论和缩略语业务更容易理解，看看它在具体现实中指的是什么。抽象的概念是有用的，特别是在具体的问题上，所以理解可能会有一个完整的循环。

 

除了给出的许多回答之外，我还想从现代客户端web或富web应用程序的角度添加一些额外的观点。

事实上，现在简单的网站和较大的网络应用程序通常是用许多流行的库(如Bootstrap)构建的。Knockout由Steve Sanderson构建，提供了对MVVM模式的支持，该模式模仿了模式中最重要的行为之一:通过视图模型进行数据绑定。只需一点点JavaScript，就可以实现数据和逻辑，然后使用简单的数据绑定HTML属性将其添加到页面元素中，类似于使用Bootstrap的许多特性。这两个库单独提供互动内容;当与路由结合使用时，这种方法可以产生一种简单而强大的方法来构建单页应用程序。

类似地，现代客户端框架(如Angular)遵循MVC模式，但也添加了一个服务。有趣的是，它被吹捧为模型-视图- whatever (MVW)。(参见Stack Overflow上的这篇文章。)

此外，随着渐进式web框架(如Angular 2)的兴起，我们看到了术语的变化，也许还有一种新的架构模式，组件由视图或模板组成，并与服务交互——所有这些都可以包含在模块中;和一系列模块组成的应用程序。

在web开发中，MVC是服务器端，MVVM是客户端(浏览器)。

大多数情况下，浏览器中的MVVM使用javascript。mvc有很多服务器端技术。