04 vue訂閱者發布者實現(Vue雙向數據綁定原理分析 -- Dep(發布者，訂閱收集器))

是必須的，訂閱回調也可以是一個和任何無關的純函數。一個訂閱者最重要的是要知道自己訂閱了什么，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的數據雙向綁定是怎么實現的

vue的數據雙向綁定是通過數據劫持和發布－訂閱者功能來實現的。

實現步驟：

1.實現一個監聽者Oberver來劫持并監聽所有的屬性，一旦有屬性發生變化就通知訂閱者。

2.實現一個訂閱者watcher來接受屬性變化的通知并執行相應的方法，從而更新視圖。

3.實現一個解析器買粉絲pile，可以掃描和解析每個節點的相關指令，并根據初始化模板數據以及初始化相對應的訂閱者。

觀察者模式確實很有用，但是在javascript實踐里面，通常我們使用一種叫做發布／訂閱模式的變體來實現觀察者模式。

從圖中也能看到，這兩種模式很相似，但是也有一些值得注意的不同。

發布／訂閱模式使用一個主題／事件頻道，這個頻道處于想要獲取通知的訂閱者和發起事件的發布者之間。這個事件系統允許代碼定義應用相關的事件，這個事件可以傳遞特殊的參數，參數中包含有訂閱者所需要的值。

觀察者模式和發布訂閱模式的不同點：

觀察者模式要求想要接受相關通知的觀察者必須到發起這個事件的被觀察者上注冊這個事件。

發布／訂閱模式使用一個主題／事件頻道（類似于中介／中間商），可以減少訂閱者和發布者之間的依賴性。

發布／訂閱模式中訂閱者可以實現一個合適的事件處理函數，用于注冊和接受由發布者廣播的相關通知。

很赞哦!（6）