摘要：其成員函數(shù)最主要的是和，前者用來(lái)設(shè)置某個(gè)的依賴(lài)，后者則用來(lái)通知與這個(gè)依賴(lài)相關(guān)的來(lái)運(yùn)行其回調(diào)函數(shù)。也就是進(jìn)行數(shù)據(jù)更新操作。

vue框架的兩個(gè)抽象核心：虛擬DOM和相應(yīng)式數(shù)據(jù)原理

關(guān)于虛擬DOM的核心算法，我們上一章已經(jīng)基本解析過(guò)了，詳細(xì)的見(jiàn)
React && VUE Virtual Dom的Diff算法統(tǒng)一之路 snabbdom.js解讀

關(guān)于響應(yīng)式數(shù)據(jù)原理，我們先看張圖
你 ‘ (4).png

具體來(lái)講，要分以下幾步：

初始化實(shí)例對(duì)象時(shí)運(yùn)行initState, 建立好props, data 的鉤子以及其對(duì)象成員的Observer, 對(duì)于computed 屬性，則建立起所有對(duì)應(yīng)的 Watcher 并且通過(guò) Object.defineProperty 在vm對(duì)象上設(shè)置一個(gè)該屬性的 getter。同時(shí)還根據(jù)自定義的 watch 來(lái)建立相應(yīng)的 Watcher

執(zhí)行掛載操作，在掛載時(shí)建立一個(gè)直接對(duì)應(yīng)render（渲染）的 Watcher，并且編譯模板生成 render 函數(shù)，執(zhí)行vm._update 來(lái)更新 DOM 。

此后每當(dāng)有數(shù)據(jù)改變，都將通知相應(yīng)的 Watcher 執(zhí)行回調(diào)函數(shù)。

export class Observer {
  value: any;
  dep: Dep;
  vmCount: number; // number of vms that has this object as root $data

  constructor (value: any) {
    this.value = value
    this.dep = new Dep()
    this.vmCount = 0
    def(value, "__ob__", this)
    if (Array.isArray(value)) {
      const augment = hasProto
        ? protoAugment
        : copyAugment
      augment(value, arrayMethods, arrayKeys)
      this.observeArray(value)
    } else {
      this.walk(value)
    }
  }

  /**
   * Walk through each property and convert them into
   * getter/setters. This method should only be called when
   * value type is Object.
   */
  walk (obj: Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i], obj[keys[i]])
    }
  }

  /**
   * Observe a list of Array items.
   */
  observeArray (items: Array) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i])
    }
  }
}

首先我們觀察到，new Observer()的時(shí)候，會(huì)進(jìn)行類(lèi)型的判斷

if (Array.isArray(value)) {
      const augment = hasProto
        ? protoAugment
        : copyAugment
      augment(value, arrayMethods, arrayKeys)
      this.observeArray(value)
    } else {
      this.walk(value)
    }

如果是數(shù)組類(lèi)型則會(huì)遞歸調(diào)用，建立依賴(lài)體系
否則則調(diào)用walk（）函數(shù)去利用Object.defineProperty簡(jiǎn)歷依賴(lài)

那么defineReactive是如何實(shí)現(xiàn)的呢，如下

//省略了部分代碼
export function defineReactive (
 obj: Object,
 key: string,
 val: any,
 customSetter?: ?Function,
 shallow?: boolean
) {
  const dep = new Dep()
  ...
  Object.defineProperty(obj, key, {
      ...
      get: function reactiveGetter () {
        ...
        dep.depend()
        ...
        return value
      },
      set: function reactiveSetter (newVal) {
        ...
        dep.notify()
      }
    })
}

攔截器會(huì)分別在getter和setter上設(shè)置中間件去維護(hù)dep數(shù)組中的依賴(lài)關(guān)系

dep.depend()

dep.notify()

字面意思非常明顯，分別用于增加依賴(lài)和通知依賴(lài)變化關(guān)系

class Dep {
  static target: ?Watcher;
  id: number;
  subs: Array;

  constructor () {
    this.id = uid++
    this.subs = []
  }

  addSub (sub: Watcher) {
    this.subs.push(sub)
  }

  removeSub (sub: Watcher) {
    remove(this.subs, sub)
  }

  depend () {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }

  notify () {
    // stabilize the subscriber list first
    const subs = this.subs.slice()
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}

Dep 就是一個(gè) Watcher 所對(duì)應(yīng)的數(shù)據(jù)依賴(lài)，在這個(gè)對(duì)象中也存有一個(gè) subs 數(shù)組，用來(lái)保存和這個(gè)依賴(lài)有關(guān)的 Watcher。其成員函數(shù)最主要的是 depend 和 notify ，前者用來(lái)設(shè)置某個(gè) Watcher 的依賴(lài)，后者則用來(lái)通知與這個(gè)依賴(lài)相關(guān)的 Watcher 來(lái)運(yùn)行其回調(diào)函數(shù)。

我們知道，Dom 上通過(guò)指令或者雙大括號(hào)綁定的數(shù)據(jù)，會(huì)為數(shù)據(jù)進(jìn)行添加觀察者watcher，當(dāng)實(shí)例化Watcher的時(shí)候 會(huì)觸發(fā)屬性的getter方法，此時(shí)會(huì)調(diào)用dep.depend()。我們看一下depend方法：

depend () {
  if (Dep.target) {
    Dep.target.addDep(this)
  }
}

Dep.target 是什么東西呢？其實(shí)在進(jìn)行Watcher實(shí)例化的時(shí)候，會(huì)調(diào)用內(nèi)部的get函數(shù)，開(kāi)始為他初始化

其中pushTarget 方法就是為Dep.target綁定此watcher實(shí)例，所以Dep.target.addDep(this)也就是執(zhí)行此實(shí)例中的addDep方法

addDep (dep: Dep) {
  ...
  dep.addSub(this)
}

這樣便為我們的dep實(shí)例添加了一個(gè)watcher實(shí)例。

接著當(dāng)我們更新data的時(shí)候，會(huì)觸發(fā)他的set方法，執(zhí)行dep.notify()函數(shù)：

notify () {
  // stabilize the subscriber list first
  const subs = this.subs.slice()
  for (let i = 0, l = subs.length; i < l; i++) {
    subs[i].update()
  }
}

這里也就是遍歷dep中收集到的watcher實(shí)例，進(jìn)行update()。也就是進(jìn)行數(shù)據(jù)更新操作。這也就是簡(jiǎn)單的數(shù)據(jù)響應(yīng)式，其實(shí)還需要注意的是： 當(dāng)數(shù)據(jù)的getter觸發(fā)后，會(huì)收集依賴(lài)，但也不是所有的觸發(fā)方式都會(huì)收集依賴(lài)，只有通過(guò)watcher觸發(fā)的getter會(huì)收集依賴(lài)：if (Dep.target) { dep.depend() }，而所謂的被收集的依賴(lài)就是當(dāng)前watcher，DOM中的數(shù)據(jù)必須通過(guò)watcher來(lái)綁定，只通過(guò)watcher來(lái)讀取。

最后付一個(gè)函數(shù)timeline
的.png