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

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

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

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

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

不過(guò)不清晰真的很正常。

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

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

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

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 更改時(shí) view 會(huì)得到提醒（這個(gè)情況是一個(gè)單向流）。

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

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

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

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

View：?jiǎn)挝募?