03 vue發布訂閱模式原理(Vue的雙向數據綁定原理)

{

   var dep = new Dep()

   Object.defineProperty(obj, key, {

       enumerable: true,

       買粉絲nfigurable: true,

       get: function reactiveGetter() {

           if (Dep.target) {

               dep.depend()

           }

           return value

       },

       set: function reactiveSetter(newVal) {

           if (value === newVal) {

               return

           } else {

               value = newVal

               dep.notify()

           }

       }

   })

}

在對數據進行讀取時，如果當前有 Watcher（對數據的觀察者吧，watcher 會負責將獲取的新數據發送給視圖），那將該 Watcher 綁定到當前的數據上（dep.depend()，dep 關聯當前數據和所有的 watcher 的依賴關系），是一個檢查并記錄依賴的過程。而在對數據進行賦值時，如果數據發生改變，則通知所有的 watcher（借助 dep.notify()）。這樣，即便是我們手動改變了數據，框架也能夠自動將數據同步到視圖。

【手把手教你搓Vue響應式原理】（五） Watcher 與 Dep

【手把手教你搓Vue響應式原理】（一）初識Vue響應式

【手把手教你搓Vue響應式原理】（二）深度監測對象全部屬性

【手把手教你搓Vue響應式原理】（三）observe 以及 ob

【手把手教你搓Vue響應式原理】（四） 數組的響應式處理

之前已經將數據劫持已經全部完成了。

那么，接下來，主要的要點就是在于兩點，依賴收集和觸發依賴更新。

它的意義主要在于控制哪些地方使用了這個變量，然后，按照最小的開銷來更新視圖 。

首先，要先明白，依賴是什么，比方說在我們的模板中有 { { a}} ，那么，這個地方就有對于變量 a 的依賴。

在模板編譯的時候，就會觸發 a 變量的 getter 。

然后，當我們執行 a++; 的時候，那么，我們就要觸發依賴的更新，當初模板中 { { a}} 的地方，就要更新，是吧！

所以，我們都是 在 getter 中收集依賴，在 setter 中觸發依賴更新 。

這一節的內容，主要就是用來專門講清楚這兩件事情。

依賴收集和觸發依賴更新主要由兩個類來完成， Dep 和 Watcher 。

Dep 和 Watcher 在設計模式中，就是 發布-訂閱者 的模式。

而依賴，你可以理解為所謂的訂閱者。

Dep 說白了就是發布者,它的工作就是依賴管理，要知道哪些地方用到了這個變量，可能用到這個變量的地方有很多，所以，它會有多個訂閱者。

然后，每個變量都應該有屬于自己的 Dep ，因為每個變量所在的依賴位置是不一樣的，所以他們的訂閱者也不一樣。

然后在變量更新之后，就去通知所有的訂閱者（Watcher），我的變量更新了，你們該觸發視圖更新了。

Watcher 說白了就是訂閱者，它接受 Dep 發過來的更新通知之后，就去執行視圖更新了。

它其實就是所謂的 watch 監聽器，變量改變之后，執行一個回調函數。

我們先按照圖例來創建我們的 Dep 類

根據我們的需求:

Dep 我們在前面也說了，每個屬性都應該有它自己的 Dep ，用來管理依賴。

所以，首先，如果我們在 Observer 中創建 Dep，那不就可以了。畢竟 Observer 會遍歷到每一個對象。

所以，很明顯，我們可以在 defineReactive 的 get 中收集依賴

因為有了 if(Dep.target) 的判斷，所以， 只有綁定 Watcher 的變量觸發 getter 時，才會添加依賴 。

這個 Dep.target 其實就是 Watcher 的實例

所以，很明顯，我們可以在 defineReactive 的 set 中收調用 notify() 方法告知 Watcher 實例，數據更新了。

至此， Dep 的所有職責，我們已經幫它完成了。

其實照道理應該有一個刪除依賴，我們這里就不再擴展了。

首先， Watcher 實例應該大家會相對而言更加好理解點，因為，我們有一個 watch 偵聽器，大家一定都很熟悉，這兩個其實一樣。

我們先按照圖例來創建我們的 Watcher 類

根據我們的需求:

這個 parsePath 需要單獨拎出來說一下，比方說我們現在有這么一個對象

我們要監聽到 a.b.c.d ，所以，我們需要下面的這種格式

所以，這個 get 很明顯就有點難度了。 我們需要通過循環 拿到 a.b 然后 .c 然后 .d。

我們將這個方法命名為 parsePath 。

入參接受我們的 b.c.d ，我們可以看到 第一句執行之后 segments=['b','c','d'] ，然后進行第二層，這是返回了一個方法，按照循環，那就是 obj=obj.b => obj=obj.c => obj=obj.d ，所以，就是返回一個對象的 obj.b.c.d，相當于是遍歷字符串中的屬性樹。

在執行 a.b.c.d=55; 的同時，我們的控制臺就會輸出 ok 55 10 。

【尚硅谷】Vue源碼解析之數據響應式原理

能說說vue的響應式原理嗎？

Vue 是一個 MVVM 框架，核心是雙向數據綁定，VM（視圖模型）是作為 V（視圖） 和 M（模型）的橋梁。下面是對 Vue 響應式（雙向數據綁定）的理解，如果錯誤盡請指出，一起交流，共同進步。

Vue響應式原理核心是 數據劫持，采用 ES5 的 object.defineproperty 的 getter 和 setter 方法。從一個例子出發：

首先，在Vue初始化階段，通過 observer 對 data 中的屬性進行遞歸的劫持，包括 name、job_ undergo、a、b等

在 get階段也就是初始化視圖時，為每一個劫持的屬性分配一個 依賴收集器，主要收集當前屬性的觀察者對象，例子中 name 屬性在模板中有兩處被使用，那么 name 屬性的依賴收集器中就存放兩個觀察者對象

當點擊按鈕時，將 name 修改為 lisi 時，會觸發 observer 的 setter 函數，將 value 更新為 lisi 最新值，然后通知依賴收集器數據發生了更新。

依賴收集就是發布訂閱模式，依賴收集器會通知所有的觀察者對象，當前name 屬性有兩個觀察者對象。

觀察者對象調用對應的回調函數進行相關的處理和DOM更新

以上是純響應式原理的分析和總結，下面配一張流程圖：

很赞哦!（669）