第五十三期：彻底理解MVC，MVP和MVVM

Vue和React的核心都有虚拟Dom，虚拟Dom的作用除了能够减少Dom操作，提升性能之外，其实还可以用来做多端渲染，这也算是近年来各种跨平台框架出现的一个原因吧。

MVC

MVC是软件设计中的一种模式，通常被用来扩展用户界面，数据以及业务逻辑。它强调业务逻辑和视图的分离。这种业务逻辑和视图的分离可以提供一种很好的开发体验。

其他的设计模式其实是基于MVC的扩展，比如MVVM,MVP,以及MVM(model-vuiew-whatever)。

• Modal 主要负责处理数据和业务逻辑
• View 主要负责处理页面布局和展示
• Controller 负责处理并更新modal中的逻辑，有时候也会直接处理View发送过来的数据

在web开发中，我们可以将HTML/css构成的界面理解为View,把js的操作理解为Controller,把本地缓存的数据理解为Modal，比如我们存在本地数据库IndexeDB中的数据。

web开发的早期，MVC主要用于服务端，但是现在，随着各种框架的兴起，这种模式在前端领域也越来越流行。

MVC存在的问题

在MVC中,View是可以直接访问Modal的。所以，View里面会包含Modal的信息，有可能还会包含一些业务逻辑。在MVC中，关注的更多的是Modal的不变性，而对于同时有多个对Modal的不同展示以View。

在MVC中，Modal不依赖于View，但是View是依赖于Modal的。一些业务在View里面实现了，要更改View也将是一件困难的事情。尤其是多个视图互相引用同一个Modal中的数据时。这种情况将变得更加复杂。

MVP

MVP(Modal-View-Presenter),Modal提供数据，View负责展示，Presenter负责逻辑的处理。

它和MVC的一个重要区别在于：View并不直接使用Modal，他们之间通过Presenter进行通信，所有的交互发生在Presenter内部。

而在MVC中，View会直接从Modal中读取数据而不是Controller。

在MVP中，Presenter完全将Modal和View进行了分离，主要的逻辑在Presenter中实现。并且，Presenter和具体的View没有具体的联系，而是通过定义好的接口实现，这样一来，当View发生变化的时候就可以保持Presenter的不变性，一旦Presenter不变，即可做到代码的重用。

MVVM

MVVM是基于MVC和MVP的进阶版。

MVVM的模式是基于数据绑定。View绑定到ViewModal，然后当View发生变化时通知ViewModal，ViewModal则和Modal进行通信，告诉Modal去更新UI。

这样的结构其实也是一种分层的设计，只是在实现的过程当中，ViewModal的实现起来相当复杂。比如Vue的双向绑定。

这样的目的还是和上面的两种模式一样：都是为了分离视图和模型。YOU点有以下几点：

1. 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。
4. 可测试。界面素来是比较难于测试的，测试可以针对ViewModel来写。

但是，使用MVVM开发的组件一般情况下不涉及数据持久化的内容，如果需要数据持久化，则需要去考虑一些具体的实现方案。