浅析 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/