媒介

记得四个月前有一次口试，口试官问我 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/