vue觀察模式淺析

觀察者模式

首先話(huà)題下來(lái)，我們得反問(wèn)一下自己，什么是觀察者模式？

概念

觀察者模式（Observer）：通常又被稱(chēng)作為發(fā)布-訂閱者模式。它定義了一種一對(duì)多的依賴(lài)關(guān)系，即當(dāng)一個(gè)對(duì)象的狀態(tài)發(fā)生改變的時(shí)候，所有依賴(lài)于它的對(duì)象都會(huì)得到通知并自動(dòng)更新，解決了主體對(duì)象與觀察者之間功能的耦合。

講個(gè)故事

上面對(duì)于觀察者模式的概念可能會(huì)比較官方化，所以我們講個(gè)故事來(lái)理解它。

A：是共產(chǎn)黨派往國(guó)民黨密探，代號(hào) 001（發(fā)布者）
B：是共產(chǎn)黨的通信人員，負(fù)責(zé)與 A 進(jìn)行秘密交接（訂閱者）

• A 日常工作就是在明面采集國(guó)民黨的一些情報(bào)
• B 則負(fù)責(zé)暗中觀察著 A
• 一旦 A 傳遞出一些有關(guān)國(guó)民黨的消息（更多時(shí)候需要對(duì)消息進(jìn)行封裝傳遞，后面根據(jù)源碼具體分析）
• B 會(huì)立馬訂閱到該消息，然后做一些相對(duì)應(yīng)的變更，比如說(shuō)通知共產(chǎn)黨們做一些事情應(yīng)對(duì)國(guó)民黨的一些動(dòng)作。

適用性

以下任一場(chǎng)景都可以使用觀察者模式

• 當(dāng)一個(gè)抽象模型有兩個(gè)方面，其中一個(gè)方面依賴(lài)于另一方面。講這兩者封裝在獨(dú)立的對(duì)象中可以讓它們可以各自獨(dú)立的改變和復(fù)用
  
• 當(dāng)一個(gè)對(duì)象的改變的時(shí)候，需要同時(shí)改變其它對(duì)象，但是卻不知道具體多少對(duì)象有待改變
  
• 當(dāng)一個(gè)對(duì)象必須通知其它對(duì)象，但是卻不知道具體對(duì)象到底是誰(shuí)。換句話(huà)說(shuō)，你不希望這些對(duì)象是緊密耦合的。

以下是我對(duì)vue觀察者模式的理解:

不要對(duì)框架的偏見(jiàn), 你真的了解jquery、angular、react 等等，框架是什么只是工具而已。

你用過(guò)jquery的 trigger、on、off 事件綁定的方法嗎？事實(shí)上 vue 不過(guò)也是這種模式，只不過(guò)vue 是自動(dòng)調(diào)用on方法，自動(dòng)觸發(fā)trigger。甚至可以不用jquery對(duì)事件監(jiān)聽(tīng)觸發(fā)的實(shí)現(xiàn)。其實(shí)最終解釋就是對(duì)某種事件的callback（基礎(chǔ)原理）。

以下是源碼目錄截圖：

1... vue 實(shí)例初始化時(shí)，會(huì)對(duì)data函數(shù)返回的對(duì)象里的屬性調(diào)用以下方法，代碼注釋如下:

// 這個(gè)是 vue 綁定自動(dòng)綁定事件的方法和觸發(fā)事件方法, 會(huì)把data函數(shù)返回的對(duì)象變量屬性，重寫(xiě)對(duì)應(yīng)屬性的 賦值 和獲取的操作。具體查看 （mdn Object.defineProperty api）
 Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: function reactiveGetter () {
   const value = getter ? getter.call(obj) : val
   // watcher 對(duì)象， 如果存在
   if (Dep.target) {
    // 把Watcher 實(shí)例 推入 Dep 實(shí)例的 subs 數(shù)組里， 這個(gè)就相當(dāng)于 on
    dep.depend()
    if (childOb) {
     childOb.dep.depend()
     if (Array.isArray(value)) {
      dependArray(value)
     }
    }
   }
   return value
  },
  set: function reactiveSetter (newVal) {
   const value = getter ? getter.call(obj) : val
   /* eslint-disable no-self-compare */
   if (newVal === value || (newVal !== newVal && value !== value)) {
    return
   }
   /* eslint-enable no-self-compare */
   if (process.env.NODE_ENV !== 'production' && customSetter) {
    customSetter()
   }
   if (setter) {
    setter.call(obj, newVal)
   } else {
    val = newVal
   }
   childOb = !shallow && observe(newVal)
   // 通知 Dep 實(shí)例 中subs 里數(shù)組 中所有 Watcher 實(shí)例, 然后調(diào)用Watcher實(shí)例里的 update方法(), 這個(gè)就相當(dāng)于 trigger。
   dep.notify()
  }
 })

// Watcher 構(gòu)造函數(shù) 
 constructor (
  vm: Component,
  expOrFn: string | Function,
  cb: Function,
  options?: ?Object,
  isRenderWatcher?: boolean
 )

2...Watcher初始化時(shí)，會(huì)調(diào)用Dep.pushTarget方法, 把 Wathcer實(shí)例賦值到dep.js 里的Dep.target, 接著會(huì)根據(jù) exporFn，運(yùn)行exporFn 所代表的方法。這個(gè)方法里基本上包含調(diào)用 1...里的getter方法(想想render鉤子里的操作基本有獲取vue實(shí)例屬性data里的值或者獲取vue實(shí)例的計(jì)算屬性的值)。

var vm = new Vue({
  data () {
    return {msg: '找個(gè)小姐姐！'}
  },
  // 相當(dāng)于 exporFn
  render(h) {
    return h('h4', {},
     // 這里面就會(huì)調(diào)用 msg 對(duì)應(yīng)的 getter方法
     this.msg
    )
  }
})

所以就會(huì)使 render 函數(shù) 與 Vue 實(shí)例 的 數(shù)據(jù) data屬性 和觀察屬性等產(chǎn)生聯(lián)系，這就形成一個(gè)閉環(huán)。當(dāng)其中的屬性變化，就會(huì)自動(dòng)調(diào)用 setter 方法，從而觸發(fā)dep.notify 方法，進(jìn)而又會(huì)觸發(fā) dep.subs 里的 Watcher 實(shí)例調(diào)用 update方法，進(jìn)而更新。
（這部分代碼不知如何說(shuō)，故此沒(méi)寫(xiě), 具體查看源碼）

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。