vue 的雙向綁定的原理是什麼

vue.js 是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。
具體步驟：
第一步：須要 observe 的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter 和 getter 
這樣的話，給這個對象的某個值賦值，就會觸發setter，那麼就能監聽到了數據變化

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

第三步：Watcher訂閱者是Observer和Compile之間通訊的橋樑，主要作的事情是:

一、在自身實例化時往屬性訂閱器(dep)裏面添加本身

二、自身必須有一個update()方法

三、待屬性變更dep.notice()通知時，能調用自身的 update() 方法，並觸發Compile中綁定的回調，則功成身退。

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