摘要：它由微軟架構(gòu)師和開發(fā)，通過利用微軟圖形系統(tǒng)和的互聯(lián)網(wǎng)應(yīng)用派生品的特性來簡化用戶界面的事件驅(qū)動程序設(shè)計。微軟的和架構(gòu)師之一于年在他的博客上發(fā)表了。更改時會得到提醒這個情況是一個單向流。

記得四個月前有一次面試，面試官問我 MVVM 是什么，MVVM 的本質(zhì)是什么。我大腦一片混亂，那時我對 MVVM 的認(rèn)知就只是“雙向綁定“和“Vue”，以這個關(guān)鍵字簡單回答了幾句，我反問 MVVM 的本質(zhì)是什么，對方就重復(fù)一次雙向綁定。我怎么覺得對方也沒懂就隨便這么一問呢...

其實面試完我就急著探求 MVVM 的真諦，查了資料，做了筆記，以下是我四個月前的理解：

ViewModel 和 View 是互相綁定的，我們不直對界面進(jìn)行操作，只需要修改數(shù)據(jù)。而和 MVC 的區(qū)別是：MVC 的 C，接收了數(shù)據(jù)，需要手動通過 js 修改 dom，這包含了對 V 的操作而無論是 vue 還是 react，都不需要對 dom 進(jìn)行操作，view 和 viewmodel 的聯(lián)系顯然比 mvc 里 vc 的聯(lián)系緊密多了，這就是我們常說的雙向綁定。我覺得是不是沒有必要把 MV* 搞得這么清楚？只要知道 MVVM 的本質(zhì)是雙向數(shù)據(jù)綁定就好了？

四個月前的我投降了，為了應(yīng)付面試我依然只記得雙向綁定，而且 MVC 和 MVVM 的概念依然不清晰，本質(zhì)的區(qū)別還是沒搞懂。

不過不清晰真的很正常。

因為網(wǎng)上關(guān)于 mvvm 和其他 mv 結(jié)構(gòu)的文章不少，按道理應(yīng)該不難理解，但是很多文章對 mv 的描述都不一致，這就導(dǎo)致很多本來就懵逼的小白更加混亂（沒錯就是我）。

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 是一種架構(gòu)模式，也被稱為 model-view-binder。它由微軟架構(gòu)師 Ken Cooper 和 Ted Peters 開發(fā)，通過利用 WPF（微軟 .NET 圖形系統(tǒng)）和 Silverlight（WPF 的互聯(lián)網(wǎng)應(yīng)用派生品）的特性來簡化用戶界面的事件驅(qū)動程序設(shè)計。微軟的 WPF 和 Silverlight 架構(gòu)師之一John Gossman 于 2005 年在他的博客上發(fā)表了 MVVM。

MVVM 與其他兩種架構(gòu)的對比：

MVVM：VM 在 UI 層之下。VM 為 view 暴露數(shù)據(jù)和方法，VM 推送數(shù)據(jù)到在它之下的 model。

MVC：view 層在結(jié)構(gòu)頂層，controller 在 view 之下。model 在 controller 之下。view 指向 controller，controller 指向 model。model 更改時 view 會得到提醒（這個情況是一個單向流）。

MVP：controller 替換為 presenter。presenter 與 view 平起平坐。presenter 監(jiān)聽 view 和 model 的事件，作為中間人在他們之間調(diào)解兩邊的事件，輔助兩邊交流。

MVVM 對于 MVC 來說更容易理解，因為 MVC 經(jīng)過長久的實踐，產(chǎn)生了很多框架，這些框架的適用領(lǐng)域也各有不同：有后端渲染工程、原生應(yīng)用工程、前后端分離后的前端工程等，在實現(xiàn) MVC 模式時理所當(dāng)然地會有一定區(qū)別，這就導(dǎo)致了 MVC 的多樣性。所以對于不同的情況，對 MVC 的理解不是完全一樣的。同樣的情況 MVVM 也有，作為一個較新的模式，實現(xiàn)比 MVC 少。此文介紹的 MVVM 模式主要以 Vue 為中心理解。

認(rèn)真看過 Vue 文檔大概都能注意到，Vue 實例的變量名是 vm，文檔中還很嚴(yán)謹(jǐn)?shù)匮a充了一句 “雖然沒有完全遵循 MVVM 模型，但是 Vue 的設(shè)計也受到了它的啟發(fā)”。

按照上面不同的工程師眼里有不同的 MVC 結(jié)構(gòu)的引言，Vue 雖然“沒有完全遵循 MVVM 模型”，但是我覺得這就是一種 Vue 特化的 MVVM。

View：單文件里