MVVM

什么是MVVM？

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

vue中MVVM的理解

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

對應vue組件中的data，props屬性。

View：視圖層，用戶操作頁面，當view-model對model更新的時候，會通過數據綁定更新到view。

對應vue組件中的template和style的部分。

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

對應繼承Vue類的組件實例

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

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

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

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

vue數據劫持結合發(fā)布者-訂閱者模式

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

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

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