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

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

按照上面不同的工程师眼里有不同的 MVC 结构的引言，Vue 虽然“没有完全遵循 MVVM 模型”，但是我觉得这就是一种 Vue 特化的 MVVM。

View：单文件里