vue是採用數據劫持,並且使用發佈-訂閱者的開發模式。原理是觀察者observer
通過Object.defineProperty()
來劫持到各個屬性的getter
setter
,在數據變動的時候,會被observer
觀察到,會通過Dep
通知數據的訂閱者watcher,之後進行相應的視圖上面的變化。
具體實現步驟:
第一步:需要observe
的數據對象進行遞歸遍歷,包括子屬性對象的屬性,都加上 setter
和getter
這樣的話,給這個對象的某個值賦值,就會觸發setter
,那麼就能監聽到了數據變化
第二步:compile
解析模板指令,將模板中的變量替換成數據,然後初始化渲染頁面視圖,並將每個指令對應的節點綁定更新函數,添加監聽數據的訂閱者,一旦數據有變動,收到通知,更新視圖
第三步:Watcher
訂閱者是Observer
和Compile
之間通信的橋樑,主要做的事情是:
1、在自身實例化時往屬性訂閱器(dep)
裏面添加自己
2、自身必須有一個update()
方法
3、待屬性變動dep.notice()
通知時,能調用自身的update()
方法,並觸發Compile
中綁定的回調,則功成身退。
第四步:MVVM
作爲數據綁定的入口,整合Observer
、Compile
和Watcher
三者,通過Observer
來監聽自己的model
數據變化,通過Compile
來解析編譯模板指令,最終利用Watcher搭起Observer和Compile之間的通信橋樑,達到數據變化 -> 視圖更新;視圖交互變化(input) -> 數據model變更的雙向綁定效果