Vue面試之簡述vue的雙向數據綁定原理

Vue的雙向數據綁定原理是什麼？

vue 是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發響應的監聽回調。

具體步驟

第一步: 須要observe的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上setter和getter，那麼就能監聽到了數據變更

第二步： compile解析模板指令，將模板中的變量替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知，更新視圖

第三步：Watcher訂閱者是Observer和Compile之間通訊的橋樑，主要作的事情是： 1. 在自身實例化時往屬性訂閱器(dep)裏面添加本身 2. 自身必須有一個updata()方法 3. 待屬性變更dep.notice()時，能調用自身update()方法，並觸發Compile**中綁定的回調，則功成身退。

第四步：MVVM做爲數據綁定的入口，整合Observer**、Compile和Watcher三者，經過Observer來監聽本身的model數據變化，經過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通訊橋樑，達到數據變化->視圖更新；視圖交互變化(input)->數據model變動的雙向綁定效果