首頁 > webfront > ECMAS > vue > > 正文

梳理vue雙向綁定的實現原理

發布人:[email protected]    點擊:

實現MVVM通用方式要實現mvvm的雙向綁定,就必須要實現以下幾點:1、實現一個數據監聽器Observer,能夠對數據對象的所有屬性進行監聽,如有

Vue 采用數據劫持結合發布者-訂閱者模式的方式來實現數據的響應式,通過Object.defineProperty來劫持數據的setter,getter,在數據變動時發布消息給訂閱者,訂閱者收到消息后進行相應的處理。


要實現mvvm的雙向綁定,就必須要實現以下幾點:

  1. Compile—指令解析系統,對每個元素節點的指令進行掃描和解析,根據指令模板替換數據,以及綁定相應的更新函數

  2. Observer—數據監聽系統,能夠對數據對象的所有屬性進行監聽,如有變動可拿到最新值并通知訂閱者

  3. Dep+Watcher—發布訂閱模型,作為連接Observer和Compile的橋梁,能夠訂閱并收到每個屬性變動的通知,執行指令綁定的相應回調函數,從而更新視圖。

    Dep是發布訂閱者模型中的發布者:get數據的時候,收集訂閱者,觸發Watcher的依賴收集;set數據時發布更新,通知Watcher 。一個Dep實例對應一個對象屬性或一個被觀察的對象,用來收集訂閱者和在數據改變時,發布更新。


    Watcher是發布訂閱者模型中的訂閱者:訂閱的數據改變時執行相應的回調函數(更新視圖或表達式的值)。一個Watcher可以更新視圖,如html模板中用到的{{test}},也可以執行一個$watch監督的表達式的回調函數(Vue實例中的watch項底層是調用的$watch實現的),還可以更新一個計算屬性(即Vue實例中的computed項)。

mvvm入口函數,整合以上三者,具體如圖所示:

Untitled-1.jpg


compire可以參看《雙向綁定的實現原理》,這里不做過多解讀。

Observer,Dep和Watcher類的實現及原理,推薦閱讀《Vue源碼解讀一:Vue數據響應式原理》,一般開發者需要關注:

收集依賴指的是誰收集依賴,依賴又是指的什么?

Watcher,作用是分割表達式,收集依賴并且在值變化的時候調用回調函數

我們上面說過一個Dep對應著一個數據(這個數據可能是:對象的屬性、一個對象、一個數組);一個Watcher對應可以是一個模板也可以是一個$watch對應的表達式、函數等,無論那種情況,他們都依賴于data里面的數據,所以這里說的依賴其實就是模板或表達式所依賴的數據,對應著相關數據的Dep

Watcher的四個使用場景

  • 第一種:觀察模板中的數據

  • 第二種:觀察創建Vue實例時watch選項里的數據

  • 第三種:觀察創建Vue實例時computed選項里的數據所依賴的數據

  • 第四種:調用$watch api觀察的數據或表達式

Watcher只有在這四種場景中,Watcher才會收集依賴,更新模板或表達式,否則,數據改變后,無法通知依賴這個數據的模板或表達式:

所以在解決數據改變,模板或表達式沒有改變的問題時,可以這么做:

首先仔細看一看數據是否在上述四種應用場景中,以便確認數據已經收集依賴;其次查看改變數據的方式,確定這種方式會使數據的改變被攔截(關于這一點,上面Obsever相關內容中說的比較多)。

對于Observer需要注意的是:

20181026182644699835594.jpeg

getter/setter方法攔截數據的不足

  1. 當對象增刪的時候,是監控不到的。比如:data={a:"a"},這個時候如果我們設置data.test="test",這個時候是監控不到的。因為在observe data的時候,會遍歷已有的每個屬性(比如a),添加getter/setter,而后面設置的test屬性并沒有機會設置getter/setter,所以檢測不到變化。同樣的,刪除對象屬性的時候,getter/setter會跟著屬性一起被刪除掉,攔截不到變化。

    vm.$set/Vue.set和vm.$delete/Vue.delete這樣的api來解決這個問題

  2. getter/setter是針對對象的對于數組的修改(push(),pop(),shift(),unshift(),splice(),sort(),reverse())等方法,arr發生了改變,此時是需要更新視圖的,但是arr的getter/setter攔截不到變化(只有在賦值的時候才會調用setter,比如:arr=[6,7,8])。

    對于這種情況,vue通過改寫Array的默認方法,在調用這些方法的時候發布更新消息。一般無需關注,但是對于如下兩種情況:

    1. 當你利用索引直接設置一個項時,例如:vm.items[indexOfItem] = newValue

    2. 當你修改數組的長度時,例如:vm.items.length = newLength

    需要vm.$set/Vue.set和vm.items.splice(newLength)解決,具體參看官方說明

  3. 每次給數據設置值得時候,都會調用setter函數,這個時候就會發布屬性更新消息,即使數據的值沒有變。從性能方便考慮我們肯定希望值沒有變化的時候,不更新模板。(像Angular這樣把批量操作延時到一次更新,一次做完所有數據變更,然后整體應用到界面上)

5246378-31f938950d89c8aa.jpg

整體感知virtual DOM

virtual DOM分為三個步驟:

1.createElement(): 用 JavaScript對象(虛擬樹) 描述 真實DOM對象(真實樹)

2.diff(oldNode, newNode) : 對比新舊兩個虛擬樹的區別,收集差異

3.patch() : 將差異應用到真實DOM樹


有的時候 第二步 可能與 第三步 合并成一步(Vue 中的patch就是這樣)


Vue的實現原理總結

  1. 首先,在實例化的過程中,把一個普通 JavaScript 對象傳給 Vue 實例的 data選項,Vue 將遍歷此對象所有的屬性,并使用 Object.defineProperty 把這些屬性全部轉為 getter/setter。

  2. Dep 是一個依賴收集器。data 下的每一個屬性都有一個唯一的 Dep 對象,在 get 中收集僅針對該屬性的依賴,然后在 set 方法中觸發所有收集的依賴。

  3. 在Watcher中對表達式求值,從而觸發數據的get。在求值之前將當前Watch實例設置到全局,使用pushTarget(this)方法。

  4. 在get()中收集依賴,this.subs.push(sub),set的時候觸發回調Dep.notify()。

  5. Compile中首先將template或el編譯成render函數,render函數返回一個虛擬DOM對象(將模板轉為 render 函數的時候,實際是先生成的抽象語法樹(AST),再將抽象語法樹轉成的 render 函數)

  6. 當 vm._render 執行的時候,所依賴的變量就會被求值,并被收集為依賴。按照Vue中 watcher.js 的邏輯,當依賴的變量有變化時不僅僅回調函數被執行,實際上還要重新求值,即還要執行一遍

  7. 如果還沒有 prevVnode 說明是首次渲染,直接創建真實DOM。如果已經有了 prevVnode 說明不是首次渲染,那么就采用 patch 算法進行必要的DOM操作。這就是Vue更新DOM的邏輯。

最后,安利下:《Vue.js 技術揭秘

參考文章

梳理Vue2.0雙向綁定的實現原理