C#架构-客户端MVVM揭秘

我们在C#架构-客户端MVP揭秘 C#架构-客户端MVP揭秘(标题正确版本)这两篇文章中讲解了客户端MVC,MVP,MVVM的历史和关系,本篇我们探索一下MVVM，我们在C#架构-客户端MVP揭秘(标题正确版本)也稍微讲解了MVP和MVVM的关系，简单的说MVVM是从MVP发展而来的，它解决了MVP中手写View层和Model层双向绑定比较繁琐的问题，让这个双向绑定过程交给框架去做。如下图所示。

我们可以从C#架构-客户端MVP揭秘(标题正确版本)中的这个图做个比较。

图1和图2的对比可以看出来MVVM在VM层做了一个双向绑定过程，而这个过程在MVP中是手写代码的（MVVM中VM层就是MVP中的Presenter层）。

MVVM在.NET的WPF和WEB前端Vue中应用广泛，使用过这两个技术的都明白数据绑定是多么的容易，只需要在控件属性绑定我们实体对象的属性，就可以完成双向绑定。当控件属性变化之后，我们实体对应的属性值就变化了，我们实体属性值变化又会使得对应的控件值变化，这个过程也是MVC被创建之初的重点，MVC创造了Model层，让视觉抽象转化为数据抽象，操控数据就操作了视觉。只是MVC中的双向绑定是手写，而且View层直接引用了Model层，导致了深耦合，这个是我们不愿看到的，我们想让View层彻底独立出来，而MVP正是解决了这个问题，让双向绑定过程转给了Presenter交互层做了。但是这个双向绑定过程是手动的，所以特别的麻烦，这就引来了MVVM。所以从历史来看MVC,MVP,MVVM都是实现了从视觉抽象转到数据抽象，这点他们是共同的。

我们看看VUE中怎么实现双向绑定，请看下图。

一看就明白，非常的简单。

我们看看WPF中是怎么实现的。

图4，图5，可以看到这个ListBox列表只要绑定了IsDeviceList，那么就双向绑定数据了，这里我们不过多解释，因为Vue和Wpf都是框架层面去做了绑定的事情，内部代码我也并没有研究过。

这里我想要在C#架构-客户端MVP揭秘(标题正确版本)这个版本代码进行改造，让winform实现MVVM。

首先winform中基本的控件都有一个DataBinding属性，作用就是双向绑定，我们使用它来加速实现MVVM。我们用它先做一个简单的例子。

一个很简单的例子，图6 label1的显示值和图7 Data实体类Data1属性对应起来，可以把Data类当作是Model层。

构造函数中View层和Model层进行绑定关系

var data = new Data();

this.label1.DataBindings.Add("Text", data, "Data1");

这样就进行了双向绑定，但是前提是Data类需要实现INotifyPropertyChanged接口，

INotifyPropertyChanged这个接口只有一个时间成员

event PropertyChangedEventHandler PropertyChanged;

Data字段Data1值变化必须触发这个事件，也就是图7Data1属性Set里面的操作。为什么要这么做，我想是DataBinging这个技术里面做的事情需要这么做。我们后续再研究一下源代码。

这样点击button1按钮，改变Data 对象中的Data1属性的值，就会让label1值变化。

这样就实现了双向绑定。本篇文章的重点是MVVM而不止是双向绑定这么简单，我们要让框架去做这个双向绑定，而且是在VM层去做这个事情，我们参考图1就明白了，因为如果只是在View中做一个双向绑定其实只是MVC的一部分，且遇到MVC的问题，视图和模型深耦合。

接下来我写的一个MVVM的代码，代码从C#架构-客户端MVP揭秘(标题正确版本)这篇文章进行改造，没有看过的，一定先看这篇MVP的文章，不想重复一些内容，不然就不理解下面所写的内容。

首先要实现的功能是一样的，textbox输入数字，点击显示，则显示到两个label里面去，点击自增，两个label数值自增显示。

请看图10，IMainVM 就两个事件，没有了之前MVP文章里面的显示方法，因为双向绑定的过程以前迁移到了框架层面。

请看图12，按照DataBinding的使用方式做，先继承实现INotifyPropertyChanged接口。

我们写一个VM层的基类，实现View和Model的绑定。

图14可以看到我们定义了一个控件集合，这些控件都需要继承IController。

然后再图15里面实现这个属性，获取控件集合，这些控件集合必须继承IController。

请看图16，IController定义了两个属性,分别是绑定哪个对象和绑定对象的哪个属性。

图17我封装了一个label的控件。图18绑定这个这个控件的两个属性。这样就为双向绑定提供了条件。

我们再看图19，这里我做了简单点，其实就是DataBindings的用法。

图20就是双向绑定的过程，这里可以看到这个VMBinder是属于框架代码，不是业务代码。

这样双向绑定过程就交给框架了，View和Model层不需要通过交互层再写绑定的代码。

这里业务层面，只需要写几个地方，一个是控件绑定属性，一个是VM层继承基类VM,Model层继承基类Model，其他都是框架做的事情。