02 vue訂閱者模式原理(理解VUE2雙向數據綁定原理和實現)

/p>

除了這些接口以外，Dep定義了兩個實例屬性和一個靜態屬性：

以上這些都很容易理解，難的在于dep.js里面還定義了一個targetStack的東西：

筆者本著求知的精神，千辛萬苦終于找到了大神的講解：

到此為止，我們就明白了Dep類的實現原理，下一篇我們將了解Watcher類的實現。

【手把手教你搓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將數據綁定到組件的原理如下：

1、當實例化一個Vue構造函數，會執行 Vue 的 init 方法，在 init 方法中主要執行三部分內容，一是初始化環境變量，而是處理 Vue 組件數據，三是解析掛載組件。以上三部分內容構成了 Vue 的整個執行過程。

2、Vue 實現了一個 觀察者-消費者(訂閱者) 模式來實現數據驅動視圖。通過設定對象屬性的 setter/getter 方法來監聽數據的變化，而每個屬性的 setter 方法就是一個觀察者， 當屬性變化將會向訂閱者發送消息，從而驅動視圖更新。

3、Vue 的訂閱者 watcher 實現在 /src/watchr.js 。構建一個 watcher 最重要的是 expOrFn 和 cb 兩個參數，cb 是訂閱者收到消息后需要執行的回調，一般來說這個回調都是視圖指令的更新方法，從而達到視圖的更新，但是這也不是必須的，訂閱回調也可以是一個和任何無關的純函數。一個訂閱者最重要的是要知道自己訂閱了什么，watcher 分析 expOrFn 的 getter 方法，從而間接獲得訂閱的對象屬性。

4、Vue 雙向數據綁定實現

數據與視圖的綁定與同步，最終體現在對數據的讀寫處理過程中，也就是 Object.defineProperty() 定義的數據 set、get 函數中。Vue 中對于的函數為 defineReactive，在精簡版實現中，我只保留了一些基本特性：

function defineReactive(obj, key, value) {

   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學習系列一 —— MVVM響應式系統的基本實現原理

MVVM是Model-View-ViewModel的簡寫。它模式是MVC—>MVP—>MVVM的進化版。

Model負責用JavaScript對象表示，View負責UI界面顯示，兩者做到了最大限度的分離。

而把Model和View關聯起來的就是ViewModel。ViewModel負責把Model的數據同步到View顯示出來，還負責把View的界面修改同步回Model更新數據。

臟值檢查 : angular.js 是通過臟值檢測的方式來比對數據是否有變更而決定是否更新視圖。

原理是，拷貝一份 買粉絲py_viewModel 在內存中,用戶操作導致 viewModel 發生改變的行為時，框架都會把 買粉絲py_viewModel 和最新的 viewModel 進

很赞哦!（386）