浅析 web 前端 MVVM

前言

记得四个月前有一次面试，面试官问我 MVVM 是什么，MVVM 的本质是什么。我大脑一片混乱，那时我对 MVVM 的认知就只是“双向绑定“和“Vue”，以这个关键字简单回答了几句，我反问 MVVM 的本质是什么，对方就重复一次双向绑定。我怎么以为对方也没懂就随便这么一问呢...

其实面试完我就急着探求 MVVM 的真谛，查了资料，作了笔记，如下是我四个月前的理解：

ViewModel 和 View 是互相绑定的，咱们不直对界面进行操做，只须要修改数据。而和 MVC 的区别是：MVC 的 C，接收了数据，须要手动经过 js 修改 dom，这包含了对 V 的操做而不管是 vue 仍是 react，都不须要对 dom 进行操做，view 和 viewmodel 的联系显然比 mvc 里 vc 的联系紧密多了，这就是咱们常说的双向绑定。我以为是否是没有必要把 MV* 搞得这么清楚？只要知道 MVVM 的本质是双向数据绑定就行了？

四个月前的我投降了，为了应付面试我依然只记得双向绑定，并且 MVC 和 MVVM 的概念依然不清晰，本质的区别仍是没搞懂。

不过不清晰真的很正常。

由于网上关于 mvvm 和其余 mv 结构的文章很多，按道理应该不难理解，可是不少文章对 mv 的描述都不一致，这就致使不少原本就懵逼的小白更加混乱（没错就是我）。

If you put ten software architects into a room and have them discuss what the Model-View-Controller pattern is, you will end up with twelve different opinions. -- Josh Smith

MVVM 基本信息

MVVM 是一种架构模式，也被称为 model-view-binder。它由微软架构师 Ken Cooper 和 Ted Peters 开发，经过利用 WPF（微软 .NET 图形系统）和 Silverlight（WPF 的互联网应用派生品）的特性来简化用户界面的事件驱动程序设计。微软的 WPF 和 Silverlight 架构师之一John Gossman 于 2005 年在他的博客上发表了 MVVM。

MVVM 结构初见

MVVM 与其余两种架构的对比：

• MVVM：VM 在 UI 层之下。VM 为 view 暴露数据和方法，VM 推送数据到在它之下的 model。
• MVC：view 层在结构顶层，controller 在 view 之下。model 在 controller 之下。view 指向 controller，controller 指向 model。model 更改时 view 会获得提醒（这个状况是一个单向流）。
• MVP：controller 替换为 presenter。presenter 与 view 分庭抗礼。presenter 监听 view 和 model 的事件，做为中间人在他们之间调解两边的事件，辅助两边交流。

MVVM 对于 MVC 来讲更容易理解，由于 MVC 通过长久的实践，产生了不少框架，这些框架的适用领域也各有不一样：有后端渲染工程、原生应用工程、先后端分离后的前端工程等，在实现 MVC 模式时理所固然地会有必定区别，这就致使了 MVC 的多样性。因此对于不一样的状况，对 MVC 的理解不是彻底同样的。一样的状况 MVVM 也有，做为一个较新的模式，实现比 MVC 少。此文介绍的 MVVM 模式主要以 Vue 为中心理解。

MVVM 与 MVC 的对比

认真看过 Vue 文档大概都能注意到，Vue 实例的变量名是 vm，文档中还很严谨地补充了一句 “虽然没有彻底遵循 MVVM 模型，可是 Vue 的设计也受到了它的启发”。

按照上面不一样的工程师眼里有不一样的 MVC 结构的引言，Vue 虽然“没有彻底遵循 MVVM 模型”，可是我以为这就是一种 Vue 特化的 MVVM。

Vue 的 MVVM

View：单文件里 <template> 标签的内容，展示给用户的内容，与 ViewModel 双向绑定，能够在其中插入 ViewModel 提供的数据。

ViewModel：Vue 实例整个都是 ViewModel，与 View 双向绑定，用户在 View 修改数据或发出 ajax 等指令时， ViewModel 会及时相应，接着向下修改 Model——至此能够看出 Model 和 View 是没有直接关系的。

Model：这一层或者有歧义。为了更好理解 Model 须要引入 Vuex，在有 Vuex 的状况下，Vuex 提供的数据就是 Model，这符合后端架构中 Model 包含业务逻辑的状况。可是在无 Vuex 的状况下，Model 应该就是 Vue 实例的 data 属性，也就是 JavaScript 数据对象自己。

前端 MVC

与之对比，MVC 的状况：

View：同样是展示给用户的部分，整个或部分 HTML 页面。

Model：JavaScript 的变量数据（能够包含 ajax 获取数据的逻辑，或是一个数据管理机制），可是在这里要额外地添加提醒 View 更新的机制。几个月前我还迷糊为何 MVC 也有观察者模式，MVC 的观察者是 View，在 Model 注册为观察者就能在 Model 更新时更新。

Controller：用户操做逻辑放置点，输入是用户的操做，输出是对 Model 的修改。

那么问题来了：MVC 和 MVVM 都用了观察者模式，二者有何不一样？

看图说话：

在理解 MVVM 和 MVC 的区别时我纠结了好久，基于 Vue 来讲，感受很是像 MVC：页面订阅数据；数据更新时页面更新，可是看了这幅图后豁然开朗。

图中对比的是 MVC 和 MVP，可是 MVP 和 MVVM 的区别基本就是 MVVM 把三者间的操做自动绑定了，不用开发者操心 V 和 P 之间的相互操做。

MVC 是由 M 通知 V，但 MVVM 是 M 通知 VM（M 和 V 没有直接关系）。

拓展：React 只是 MVC 的 V？

至今还普遍流传这这么一句话：React不是一个MVC框架，而是一个用于构建组件化UI的库，是一个前端界面开发工具。

这不是错的，但确定是过期的。在 React 刚面世的时候，开发团队强调了这种新型的界面便携方法（Jsx 使用函数生成界面），强调 Virtual DOM 和 diff 算法，然后来，官网已经把相关描述修改了。

理解、交流

进步不能缺乏交流，若是你们对三种架构模式的区别有不一样看法，请必定要在评论区留言。文中若出现错误观点也请提醒，谢谢热爱编程的你们。

参考文献

https://zh.wikipedia.org/wiki...
https://russelleast.wordpress...
https://medium.com/javascript...
https://web.archive.org/web/20150219153055/http://joel.inpointform.net/software-development/mvvm-vs-mvp-vs-mvc-the-differences-explained/