Vue的雙向數據綁定原理是什么?


 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變更的雙向綁定效果


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM