Vue數(shù)據(jù)雙向綁定的原理是什么?

Vue.js是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。

1、需要observe的數(shù)據(jù)對象進行遞歸遍歷，包括子屬性對象的屬性，都加上setter和getter，這樣的話，給這個對象的某個值賦值，就會觸發(fā)setter，那么就能監(jiān)聽到了數(shù)據(jù)變化。

2、compile解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁面視圖，并將每個指令對應(yīng)的節(jié)點綁定更新函數(shù)，添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動，收到通知，更新視圖。

3、Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是:

(1)在自身實例化時往屬性訂閱器(dep)里面添加自己

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

(3)待屬性變動dep.notice()通知時，能調(diào)用自身的update()方法，并觸發(fā)Compile中綁定的回調(diào)，則功成身退。

4、MVVM作為數(shù)據(jù)綁定的入口，整合Observer、Compile和Watcher三者，通Observer來監(jiān)聽自己的model數(shù)據(jù)變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達(dá)到數(shù)據(jù)變化 -> 視圖更新；視圖交互變化(input) ->數(shù)據(jù)model變更的雙向綁定效果。

猜你喜歡

JavaScript中l(wèi)et和var和const有什么區(qū)別?

v-show和v-if有什么區(qū)別？

什么是閉包函數(shù)?如何實現(xiàn)？

黑馬程序員HTML&JS+前端開發(fā)課程