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

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

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

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

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

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

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

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

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

猜你喜歡

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

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

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

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