MVVM

什么是MVVM？

MVVM是Model-View-ViewModel,是把一個系統(tǒng)分為了模型（model）,、視圖（view）和view-model三個部分,。vue是一個典型的MVVM思想，數(shù)據(jù)驅(qū)動視圖,。
通俗一點就是view層不直接和model層通信,，他們只能通過view-model層通信。

vue中MVVM的理解

vue是一個MVVM漸進式框架,，MVVM是vue的實際模式,，在vue框架中數(shù)據(jù)會自動驅(qū)動視圖。我們寫vue就知道它的單文件組件開發(fā)方式,。
Model：數(shù)據(jù)層,，僅僅關(guān)注數(shù)據(jù)本身，不關(guān)心任何行為,。

對應(yīng)vue組件中的data,，props屬性。

View：視圖層,，用戶操作頁面,，當(dāng)view-model對model更新的時候，會通過數(shù)據(jù)綁定更新到view,。

對應(yīng)vue組件中的template和style的部分,。

ViewModel：業(yè)務(wù)邏輯層,，view需要什么數(shù)據(jù)，ViewModel就提供什么數(shù)據(jù),，view有些哪些操作,，ViewModel就要響應(yīng)這些操作；View和ViewModel兩種交互方式：雙向數(shù)據(jù)傳遞（數(shù)據(jù)屬性和data binding）和單向傳遞操作（命令屬性）,；由于ViewModel的雙向數(shù)據(jù)綁定,，當(dāng)Model發(fā)生變化時，ViewModel就會更新,，ViewModel變化,，Model也會更新。

對應(yīng)繼承Vue類的組件實例

vue在MVVM思想下,，view和model沒有直接聯(lián)系,，但是view和view-model、model和view-model之間是會交互的,。當(dāng)view視圖進行dom操作等使數(shù)據(jù)發(fā)生變化時,，可以通過view-model同步到model中，同樣的model數(shù)據(jù)變化也會同步到vue中,。

MVVM的數(shù)據(jù)綁定實現(xiàn)

• 發(fā)布者-訂閱模式（backbone.js）
• 臟值模式（angular/react）
• 數(shù)據(jù)劫持（vue）

Vue實現(xiàn)MVVM的雙向綁定

vue數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式

vue是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式,，通過Object.defineProperty()來劫持（監(jiān)聽）各個屬性的setter，getter,，在數(shù)據(jù)（對象）發(fā)生變動時發(fā)布消息給訂閱者,，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。
因此,，要實現(xiàn)MVVM的雙向綁定就必須要實現(xiàn)以下幾點：

• 實現(xiàn)一個數(shù)據(jù)監(jiān)聽器Observer,。對數(shù)據(jù)對象的所有屬性進行監(jiān)聽（包括子屬性對象的屬性），利用Object.defineProperty()對屬性都加上setter和getter（這樣的話,，給這個屬性的某個值賦值就會觸發(fā) setter,那么就能監(jiān)聽數(shù)據(jù)的變化）,，如發(fā)生變動可拿到最新值并通知訂閱者。
• 實現(xiàn)一個指令解析器Compile,。對vue每個元素節(jié)點的指令進行掃描和解析,，將指令模板的變量都替換成數(shù)據(jù)，然后初始化渲染頁面視圖,，并將每個指令對應(yīng)的節(jié)點綁定更新函數(shù),，添加監(jiān)聽數(shù)據(jù)的訂閱者,，一旦數(shù)據(jù)發(fā)生變動,，收到通知，調(diào)用更新函數(shù)進行數(shù)據(jù)更新,。
• 實現(xiàn)一個訂閱者Watcher,。Watcher是Observer和Compile之間通信的橋梁，主要任務(wù)是訂閱Observer中的屬性值變化的消息，當(dāng)屬性值發(fā)生變化時,，觸發(fā)指令解析器Compile中對應(yīng)的更新函數(shù),，從而更新視圖。
• 實現(xiàn)MVVM入口函數(shù),，整合以上三者,。

Vue面試題之vue實現(xiàn)MVVM數(shù)據(jù)綁定