03 vue觀察者模式和訂閱模式(vuejs源碼用了什么設計模式，具體點的)

server觀察的數據發生變化時，通過Dep通知各個已經訂閱的Watcher。

Watcher是用來訂閱數據的變化的并執行相應操作（例如更新視圖）的。Watcher的構造器函數定義如下：

參數中，vm表示組件實例，expOrFn表示要訂閱的數據字段（字符串表示，例如a.b.c）或是一個要執行的函數，cb表示watcher運行后的回調函數，options是選項對象，包含deep、user、lazy等配置。

Object.defineProperty(obj, prop, descriptor) ，這個語法內有三個參數，分別為 obj （要定義屬性的對象） prop （要定義或修改的屬性的名稱或 Symbol ） descriptor （要定義或修改的屬性描述符=>具體的改變方法）

簡單地說，就是用這個方法來定義一個值。當調用時我們使用了它里面的get方法，當我們給這個屬性賦值時，又用到了它里面的set方法；

主要解釋第三個參數 {

value: 設置屬性的值

writable: 值是否可以重寫。true | false

enumerable: 目標屬性是否可以被枚舉。true | false (就是能不能被遍歷出來)

買粉絲nfigurable: 目標屬性是否可以被刪除或是否可以再次修改特性 true | false

set: 目標屬性設置值的方法

get：目標屬性獲取值的方法

}

set 是一個函數，接收一個新值，會在值被重寫或修改的時候觸發這個函數

get 是一個函數，返回一個值，會在屬性被調用的時候觸發。

注 ：

Object.defineProperty()詳解

Object.defineProperty()官方文檔

已經了解到vue是通過數據劫持的方式來做數據綁定的，其中最核心的方法便是通過Object.defineProperty()來實現對屬性的劫持，那么在設置或者獲取的時候我們就可以在get或者set方法里假如其他的觸發函數，達到監聽數據變動的目的。

我們知道通過Object.defineProperty()可以實現數據劫持，它的屬性在賦值的時候觸發set方法，

當然要是這么粗暴，肯定不行，性能會出很多的問題。

observer用來實現對每個vue中的data中定義的屬性循環用Object.defineProperty()實現數據劫持，以便利用其中的setter和getter，然后通知訂閱者，訂閱者會觸發它的update方法，對視圖進行更新。

為什么要訂閱者 ：在vue中v-model，v-name，{ { }}等都可以對數據進行顯示，也就是說假如一個屬性都通過這三個指令了，那么每當這個屬性改變的時候，相應的這個三個指令的買粉絲視圖也必須改變，于是vue中就是每當有這樣的可能用到雙向綁定的指令，就在一個Dep中增加一個訂閱者，其訂閱者只是更新自己的指令對應的數據，也就是v-model='name'和{ { name}}有兩個對應的訂閱者，各自管理自己的地方。每當屬性的set方法觸發，就循環更新Dep中的訂閱者。

訂閱發布模式（又稱觀察者模式）定義了一種一對多的關系，讓多個觀察者同時監聽某一個主題對象，這個主題對象的狀態發生改變時就會通知所有觀察者對象。

發布者發出通知 => 主題對象收到通知并推送給訂閱者 => 訂閱者執行相應操作

舉個例子：

2.實現買粉絲pile： 買粉絲pile的目的就是解析各種指令稱真正的買粉絲。

這樣一來就實現了vue的數據雙向綁定。

參考鏈接：

理解VUE雙向數據綁定原理和實現---趙佳樂

Vue的雙向數據綁定原理

vue雙向綁定原理分析

Vue原理解析之observer模塊

深入響應式原理

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()）。這樣，即便是我們手動改變了數據，框架也能夠自動將數據同步到視圖。

很赞哦!（6）