04 js訂閱發布者模式(前端經典面試題(包含JS、CSS、React、瀏覽器等))

據與視圖的綁定與同步，最終體現在對數據的讀寫處理過程中，也就是 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()）。這樣，即便是我們手動改變了數據，框架也能夠自動將數據同步到視圖。

很赞哦!（16155）