手把手教妳Vue響應原理(2)深度監控對象的所有屬性
手把手教妳Vue反應原理(3)觀察ob
手把手教妳摩擦Vue的響應原理(4)數組的響應處理
數據劫持之前已經完成。
然後，接下來，重點是兩點，依賴收集和觸發依賴更新。
它的意義主要在於控制這個變量用在什麽地方，然後用最小的開銷更新視圖。
首先，我們需要明白什麽是依賴。比如我們的模板裏有{{a}}，所以這裏對變量A有依賴。
當模板被編譯時，變量A的getter將被觸發。
然後，當我們執行a++；，那麽，我們就會觸發依賴項的更新，原模板中的place {{a}}就會被更新，對！
因此，我們都在getter中收集依賴項，並在setter中觸發依賴項更新。
這壹節的內容主要用來闡明這兩件事。
依賴收集和觸發依賴更新主要由Dep和Watcher兩個類完成。
Dep和Watcher處於設計模式，即發布-訂閱模式。
而依賴，妳可以理解為所謂的訂閱者。
Dep是發行商，工作就是靠管理。要知道這個變量用在哪裏，有很多地方可能會用到，所以它會有多個訂閱者。
然後，每個變量應該有自己的Dep，因為每個變量依賴於不同的位置，所以它們的訂閱者是不同的。
然後，在變量更新之後，我會通知所有的訂閱者我的變量更新了，現在是妳觸發視圖更新的時候了。
說白了，Watcher就是訂閱者。接受Dep發送的更新通知後，將執行視圖更新。
實際上就是所謂的手表監聽器。變量改變後，執行壹個回調函數。
讓我們首先根據圖例創建我們的Dep類。
根據我們的需求:
正如我們前面所說的，每個屬性都應該有自己的Dep來管理依賴關系。
所以，首先，如果我們在Observer中創建Dep，那沒問題。畢竟，觀察者會穿過每壹個物體。
因此，顯然，我們可以在defineReactive的get中收集依賴項。
由於if(Dep.target)的判斷，只有綁定到Watcher的變量觸發getter時，才會添加依賴關系。
這個Dep.target實際上是Watcher的壹個實例。
因此，很明顯，我們可以調用defineReactive集合中的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 = & gtobj = obj.c = & gtObj=obj.d，所以是返回壹個對象的obj.b.c.d，相當於在字符串中遍歷屬性樹。
在實施中a . b . c . d = 55；同時我們的控制臺會輸出ok 55 10。
上思谷Vue源代碼分析的數據響應原理