摘要：其成員函數最主要的是和，前者用來設置某個的依賴，后者則用來通知與這個依賴相關的來運行其回調函數。也就是進行數據更新操作。

vue框架的兩個抽象核心：虛擬DOM和相應式數據原理

關于虛擬DOM的核心算法，我們上一章已經基本解析過了，詳細的見
React && VUE Virtual Dom的Diff算法統一之路 snabbdom.js解讀

關于響應式數據原理，我們先看張圖
你 ‘ (4).png

具體來講，要分以下幾步：

初始化實例對象時運行initState, 建立好props, data 的鉤子以及其對象成員的Observer, 對于computed 屬性，則建立起所有對應的 Watcher 并且通過 Object.defineProperty 在vm對象上設置一個該屬性的 getter。同時還根據自定義的 watch 來建立相應的 Watcher

執行掛載操作，在掛載時建立一個直接對應render（渲染）的 Watcher，并且編譯模板生成 render 函數，執行vm._update 來更新 DOM 。

此后每當有數據改變，都將通知相應的 Watcher 執行回調函數。

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()的時候，會進行類型的判斷

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

如果是數組類型則會遞歸調用，建立依賴體系
否則則調用walk（）函數去利用Object.defineProperty簡歷依賴

那么defineReactive是如何實現的呢，如下

//省略了部分代碼
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()
      }
    })
}

攔截器會分別在getter和setter上設置中間件去維護dep數組中的依賴關系

dep.depend()

dep.notify()

字面意思非常明顯，分別用于增加依賴和通知依賴變化關系

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 就是一個 Watcher 所對應的數據依賴，在這個對象中也存有一個 subs 數組，用來保存和這個依賴有關的 Watcher。其成員函數最主要的是 depend 和 notify ，前者用來設置某個 Watcher 的依賴，后者則用來通知與這個依賴相關的 Watcher 來運行其回調函數。

我們知道，Dom 上通過指令或者雙大括號綁定的數據，會為數據進行添加觀察者watcher，當實例化Watcher的時候 會觸發屬性的getter方法，此時會調用dep.depend()。我們看一下depend方法：

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

Dep.target 是什么東西呢？其實在進行Watcher實例化的時候，會調用內部的get函數，開始為他初始化

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

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

這樣便為我們的dep實例添加了一個watcher實例。

接著當我們更新data的時候，會觸發他的set方法，執行dep.notify()函數：

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實例，進行update()。也就是進行數據更新操作。這也就是簡單的數據響應式，其實還需要注意的是： 當數據的getter觸發后，會收集依賴，但也不是所有的觸發方式都會收集依賴，只有通過watcher觸發的getter會收集依賴：if (Dep.target) { dep.depend() }，而所謂的被收集的依賴就是當前watcher，DOM中的數據必須通過watcher來綁定，只通過watcher來讀取。

最后付一個函數timeline
的.png