這一章主要分為以下幾個(gè)模塊：

• observe方法的作用與實(shí)現(xiàn)

• Observer類的實(shí)現(xiàn)

• defineReactive方法做了哪些額外處理？

• 攔截?cái)?shù)組變異方法 - Vue是如果處理數(shù)組的監(jiān)聽的？

• $set/$del的實(shí)現(xiàn)

• Dep類的實(shí)現(xiàn)

• Watcher類的實(shí)現(xiàn)

observe方法

上一章我們已經(jīng)提到了defineReactive方法是可以將對(duì)象的某一個(gè)key轉(zhuǎn)換成響應(yīng)式。如果我們想直接將一個(gè)對(duì)象或者數(shù)組里的值全部轉(zhuǎn)換成響應(yīng)式，就不得不每次都去循序遍歷處理。

因此，為了解決這個(gè)問題，Vue封裝了一個(gè)方法，專門用于監(jiān)測(cè)對(duì)象或數(shù)據(jù)：如果是對(duì)象，就循環(huán)遍歷處理所有的key；如果是數(shù)組，就遍歷每一個(gè)元素，對(duì)每一個(gè)元素進(jìn)行響應(yīng)式處理。下面我們看一下這個(gè)observe方法的具體實(shí)現(xiàn)。響應(yīng)式的核心代碼是在src/core/observer目錄下，我們先打開該目錄下的index.js文件，找到observe方法：

export function observe (value: any, asRootData: ?boolean): Observer | void {
  // 1. 如果不是對(duì)象或者是VNode則不檢測(cè)
  if (!isObject(value) || value instanceof VNode) {
    return
  }

  let ob: Observer | void
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__
  } else if (
    shouldObserve &&
    !isServerRendering() &&
    (Array.isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value) &&
    !value._isVue
  ) {
    ob = new Observer(value)
  }

  if (asRootData && ob) {
    ob.vmCount++
  }
  return ob
}

第一步，先判斷要監(jiān)測(cè)的value是否是對(duì)象，如果不是則不需要監(jiān)測(cè)。如果value是VNode，那么也不需要監(jiān)測(cè)，因?yàn)殡m然VNode中會(huì)使用數(shù)據(jù)，但是監(jiān)測(cè)這種依賴關(guān)系沒有意義。

// 1. 如果不是對(duì)象或者是VNode則不檢測(cè)
if (!isObject(value) || value instanceof VNode) {
   return
 }

第二步，判斷value是否具有__ob__屬性，如果存在且為Observer類的實(shí)例，說明該value已經(jīng)被監(jiān)測(cè)了，返回相應(yīng)的監(jiān)測(cè)對(duì)象即可。否則，說明value尚未被監(jiān)測(cè)，繼續(xù)進(jìn)行判斷，這里一共有5個(gè)判斷條件

// shouldObserve 用于控制是否數(shù)據(jù)需要監(jiān)測(cè)，因?yàn)橛械臅r(shí)候是不需要監(jiān)測(cè)的
shouldObserve &&
// 服務(wù)端渲染也不需要監(jiān)測(cè)
!isServerRendering() &&
// 只有數(shù)組或?qū)ο蟛艜?huì)被監(jiān)測(cè)
(Array.isArray(value) || isPlainObject(value)) &&
// 被 Object.seal 或 Object.freeze等處理過的對(duì)象不可被監(jiān)測(cè)
Object.isExtensible(value) &&
// 如果是 Vue 實(shí)例則不會(huì)被監(jiān)測(cè)
!value._isVue

如果所有條件滿足，那么就會(huì)實(shí)例化一個(gè)Observer類?？梢钥闯?，observe函數(shù)主要是做了一些判斷，實(shí)際的響應(yīng)式處理都在Observer類當(dāng)中，后續(xù)我們會(huì)繼續(xù)分析Observer類。

最后，如果是根數(shù)據(jù)的話，那么ob.vmCount會(huì)加1，這個(gè)有什么用呢？實(shí)際上從這里我們可以得出，如果是根數(shù)據(jù)被監(jiān)測(cè)的話，那么ob.vmCount是大于0的，而Vue.set方法里進(jìn)行監(jiān)測(cè)時(shí)，會(huì)判斷ob.vmCount為true時(shí)不會(huì)進(jìn)行監(jiān)測(cè)。因此Vue.set方法是無法對(duì)根數(shù)據(jù)里的key處理成響應(yīng)式。

if (asRootData && ob) {
   ob.vmCount++
}

Observer類

Observer類的定義在observe方法的上方，部分代碼如下:

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

  constructor (value: any) {
    this.value = value
    this.dep = new Dep()
    // 當(dāng)為根數(shù)據(jù)時(shí)，vmCount > 0，$set 方法不進(jìn)行處理
    this.vmCount = 0
    // 在 value 上添加屬性 __ob__ 
    def(value, '__ob__', this)
    // 1. 如果是數(shù)組，由于 Object.defineProperty 無法檢驗(yàn)數(shù)據(jù)的變化，因此需要額外處理
    if (Array.isArray(value)) {
      if (hasProto) {
        protoAugment(value, arrayMethods)
      } else {
        copyAugment(value, arrayMethods, arrayKeys)
      }
      this.observeArray(value)
    } else {
    // 2. 如果是對(duì)象，遍歷對(duì)每個(gè) key 進(jìn)行響應(yīng)式處理
      this.walk(value)
    }
  }
}

Observer實(shí)例化時(shí)主要做了這幾項(xiàng)工作：
首先是記錄下要監(jiān)測(cè)的值，同時(shí)生成一個(gè)dep實(shí)例。注意，這里的dep不同于上一章我們提到的閉包里的dep，閉包里的dep是屬于某一個(gè)字段的，而這里的dep是針對(duì)value這個(gè)對(duì)象的。是在這個(gè)對(duì)象發(fā)生改變時(shí)，觸發(fā)這個(gè)dep相關(guān)的Watcher更新。

接下來，value上被添加了__ob__屬性，用于保存當(dāng)前實(shí)例，前面observe就是通過__ob__訪問已經(jīng)實(shí)例化好的Observer對(duì)象，達(dá)到不重復(fù)監(jiān)測(cè)的目的。

最后，如果value是數(shù)組，則會(huì)調(diào)用observeArray方法，我們看一下該方法是怎樣的：

observeArray (items: Array<any>) {
  for (let i = 0, l = items.length; i < l; i++) {
    observe(items[i])
  }
}

這里不難發(fā)現(xiàn)，observeArray就是遍歷value里的每一個(gè)元素，然后進(jìn)行響應(yīng)式處理。

當(dāng)代碼走到else分支時(shí)，代表value是一個(gè)對(duì)象，此時(shí)會(huì)執(zhí)行walk方法：

  walk (obj: Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i])
    }
  }

walk方法比較簡(jiǎn)單，就是通過defineReactive方法對(duì)對(duì)象里的每個(gè)key做響應(yīng)式處理。下面我們看一下defineReactive的實(shí)現(xiàn)。

defineReactive方法

defineReactive方法代碼如下所示：

export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {
  const dep = new Dep()

  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }

  const getter = property && property.get
  const setter = property && property.set
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key]
  }
  let childOb = !shallow && observe(val)
  
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
        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()
      }
      // #7981: for accessor properties without setter
      if (getter && !setter) return
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      dep.notify()
    }
  })
}

可以看出，defineReactive方法和我們上一章實(shí)現(xiàn)的思路大致是一致的：在get的時(shí)候，使用dep.depend()來建立起Dep和Watcher之間的依賴關(guān)系，在set的時(shí)候通過dep.notify()來通知相應(yīng)Watcher進(jìn)行更新。

所以這里我們主要討論一下不一樣的地方。

首先，defineReactive在響應(yīng)式處理前做了一層判斷：

const property = Object.getOwnPropertyDescriptor(obj, key)
if (property && property.configurable === false) {
  return
}

如果property.configurable為false的話，那么是defineProperty方法是無效的，因此不做任何處理。

接著，通過property獲取了這個(gè)字段原有的get和set，并且緩存起來：

const getter = property && property.get
const setter = property && property.set
if ((!getter || setter) && arguments.length === 2) {
  val = obj[key]
}
let childOb = !shallow && observe(val)

!shallow && observe(val)這段代碼則表示當(dāng)val值是對(duì)象時(shí)，需要進(jìn)行遞歸監(jiān)測(cè)，這樣才能保證對(duì)象里任何的屬性都是響應(yīng)式的。

但是上面的這行代碼(!getter || setter) && arguments.length === 2就比較難以理解了，這牽涉到Vue中的兩個(gè)issue:#7302和#7828。我也糾結(jié)了比較長(zhǎng)的時(shí)間，下面講一下我的理解。

Vue原本處理對(duì)象時(shí)的walk方法是這樣定義的：

 walk (obj: Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i], obj[keys[i]])
    }
 }

defineReactive是傳入三個(gè)參數(shù)的，也就是將對(duì)應(yīng)的值也傳進(jìn)入了。這樣做會(huì)有什么問題呢？我們知道，當(dāng)獲取obj[keys[i]]這個(gè)值的時(shí)候，實(shí)際上會(huì)調(diào)用keys[i]這個(gè)字段的get方法，如果用戶自己定義了這個(gè)get方法，那么獲取值時(shí)是無法預(yù)知用戶會(huì)如何定義的。這里參考《Vue技術(shù)內(nèi)幕》中的一句話。

之所以在深度觀測(cè)之前不取值是因?yàn)閷傩栽镜?getter 由用戶定義，用戶可能在 getter 中做任何意想不到的事情，這么做是出于避免引發(fā)不可預(yù)見行為的考慮。

所以，我們?cè)谏疃缺O(jiān)測(cè)之前，如果用戶自己設(shè)置了get，那么我們就跳過監(jiān)測(cè)，可以參考#7302。所以代碼改成只傳兩個(gè)參數(shù)：

// walk 方法
walk (obj: Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i], obj[keys[i]])
    }
  }

// defineReactive 方法
const getter = property && property.get
const setter = property && property.set
if ((!getter && arguments.length === 2) {
  val = obj[key]
}
let childOb = !shallow && observe(val)

這樣，如果傳入的只有兩個(gè)參數(shù)，也就是沒有傳value值時(shí)，如果用戶設(shè)置了get，那么就不會(huì)執(zhí)行val = obj[key]這行代碼，因此此時(shí)val的值為undefined，那么observe(val)就不會(huì)進(jìn)行監(jiān)測(cè)了。

但是這樣又會(huì)存在怎樣的問題呢？如果對(duì)于某個(gè)字段沒有get，我們會(huì)對(duì)這個(gè)字段的值（這里代稱叫做value）進(jìn)行深度監(jiān)測(cè)。監(jiān)測(cè)完后，我們使用了Object.defineProperty對(duì)這個(gè)字段添加了get和set方法，此時(shí)get又是存在的。如果改變value里的值，由于該字段的get是存在的，所以在遞歸監(jiān)測(cè)時(shí)會(huì)跳過對(duì)value的深度監(jiān)測(cè)。這就導(dǎo)致了前后不一致的情況，詳情參考#7828。
為了解決這個(gè)問題，我們將判斷方式改為，增加了setter判斷：

if ((!getter || setter) && arguments.length === 2) {
  val = obj[key]
}

這樣，當(dāng)getter和setter同時(shí)存在時(shí)，值一樣會(huì)被深度監(jiān)測(cè)。至此，這幾行代碼就解析完了，如果這里的解析存在偏差，懇請(qǐng)各位不吝賜教~

好了，我們看下后面的代碼，在get方法里：

if (childOb) {
    childOb.dep.depend()
    if (Array.isArray(value)) {
        dependArray(value)
    }
}

如果childOb存在，說明value是對(duì)象或數(shù)組，且已經(jīng)被監(jiān)測(cè)，這個(gè)時(shí)候需要記錄這個(gè)value與當(dāng)前Watcher之間的關(guān)系。另外，如果值是數(shù)組的話，會(huì)執(zhí)行dependArray方法：

function dependArray (value: Array<any>) {
  for (let e, i = 0, l = value.length; i < l; i++) {
    e = value[i]
    e && e.__ob__ && e.__ob__.dep.depend()
    if (Array.isArray(e)) {
      dependArray(e)
    }
  }
}

這里主要分為value數(shù)組和對(duì)象兩種情況：

• 如果value是數(shù)組，那么會(huì)遍歷數(shù)組，遍歷的結(jié)果如果是對(duì)象或數(shù)組，那么e.__ob__存在，進(jìn)行依賴搜集。如果是數(shù)組，重復(fù)該步驟。
• 如果value是數(shù)組，遍歷鍵值對(duì)，如果遍歷的值為數(shù)組，重復(fù)上述步驟，如果是對(duì)象，重復(fù)本步驟

所以，本質(zhì)上這段代碼是遞歸處理了對(duì)象和數(shù)組的依賴搜集過程，這里需要慢慢理解一下遞歸的過程。

攔截?cái)?shù)組變異方法

如果監(jiān)測(cè)的value為數(shù)組時(shí)，這里會(huì)出現(xiàn)一種問題：如果數(shù)組新增了某個(gè)元素，那么實(shí)際上defineProperty是不會(huì)檢測(cè)到這種數(shù)組的增刪變化的，因此新增的元素也不能自動(dòng)進(jìn)行響應(yīng)式處理了。

那么Vue又是如何處理這種情況的呢？讓我們回到Observer類中，當(dāng)value是數(shù)組時(shí)，做了以下處理：

if (Array.isArray(value)) {
    if (hasProto) {
        protoAugment(value, arrayMethods)
    } else {
        copyAugment(value, arrayMethods, arrayKeys)
  }
  this.observeArray(value)
}


function protoAugment (target, src: Object) {
  target.__proto__ = src
}

這里主要看一下protoAugment方法，它將value的__proto__指向了arrayMethods，我們看看arrayMethods是什么，打開./array.js文件：

const arrayProto = Array.prototype
// 繼承于Array
export const arrayMethods = Object.create(arrayProto)

const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

/**
 * Intercept mutating methods and emit events
 */
methodsToPatch.forEach(function (method) {
  // cache original method
  // 緩存數(shù)組的原始方法
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
    // 調(diào)用數(shù)組的原始方法
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    // 如果是增加了新的元素，那么需要將新增元素也進(jìn)行響應(yīng)式處理
    if (inserted) ob.observeArray(inserted)
    // notify change
    // 數(shù)組改變了，通知相應(yīng) watcher 更新
    ob.dep.notify()
    return result
  })
})

首先，arrayMethods繼承于Array，因此擁有數(shù)組相關(guān)的屬性方法。然后，遍歷數(shù)組中所有與增刪操作相關(guān)的方法名，進(jìn)行響應(yīng)式處理，這樣每次數(shù)組的增刪方法時(shí)，都會(huì)觸發(fā)這里的mutator函數(shù)。mutator函數(shù)主要做了以下三點(diǎn)工作：

• 執(zhí)行數(shù)組原有的方法，保持原有輸出不變。

• 如果執(zhí)行的是增加相關(guān)的方法，如push,unshift,splice，記錄下增加了哪些元素，然后將這些元素也進(jìn)行響應(yīng)式處理。

• 因?yàn)榇藭r(shí)能夠”感受“到數(shù)組變化了，所以會(huì)通知數(shù)組相關(guān)的watcher進(jìn)行更新。

$set/$del的實(shí)現(xiàn)

現(xiàn)在還存在一個(gè)問題：如果我們?yōu)閷?duì)象添加了一個(gè)屬性，我們卻不知道這個(gè)對(duì)象發(fā)生了變化，從而也就不能對(duì)這個(gè)屬性自動(dòng)進(jìn)行響應(yīng)式處理了。同樣，如果我們對(duì)數(shù)組用索引來增加新值的時(shí)候，而不觸發(fā)數(shù)組變異方法，也就無法感知變化了。

那么Vue是如何處理這一問題的呢？這里就要提到$set方法的實(shí)現(xiàn)了，它的目的就是為了解決設(shè)置新的屬性不具備響應(yīng)式的問題。

export function set (target: Array<any> | Object, key: any, val: any): any {
  if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
  }
  // 1. 如果是數(shù)組，key 是 index，且是有效索引，那么將對(duì)應(yīng)的 value 進(jìn)行替換即可
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, val)
    return val
  }
  // 2. 如果對(duì)象自身就存在這個(gè)鍵，直接賦值即可
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  // 3. 如果是 Vue的實(shí)例，或者是 根數(shù)據(jù)，那么不應(yīng)該被設(shè)置。
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid adding reactive properties to a Vue instance or its root $data ' +
      'at runtime - declare it upfront in the data option.'
    )
    return val
  }
  // 4. 如果沒有 ob，說明對(duì)象本來就不是響應(yīng)式的，這里也沒必要做響應(yīng)式處理
  if (!ob) {
    target[key] = val
    return val
  }
  // 5. 如果對(duì)象本來就是響應(yīng)式的，那么添加的 key 也要做響應(yīng)式處理
  defineReactive(ob.value, key, val)
  
  // 6. 對(duì)象變化了，通知相關(guān) watcher 更新
  ob.dep.notify()
  return val
}

如代碼中注釋所示，前4個(gè)判斷都只將鍵值進(jìn)行普通設(shè)置處理。到了第5步，也就是數(shù)組索引超出邊界或者對(duì)象設(shè)置了新的屬性時(shí)，才會(huì)對(duì)新增屬性進(jìn)行響應(yīng)式處理。這里看一下第6步，為什么需要通知Watcher更新呢？這里舉一個(gè)例子：

// dom
<div> {{ user.name }}</div>


// index.vue
export default {
    data() {
    return {
      user: {}
    }
  },
  mounted() {
    this.$set(this.user, 'name', 'qgh')
  }
}

我們分析一下，因?yàn)?code>data里的user沒有name屬性，所以name屬性是沒有做過響應(yīng)式處理的，那么改變this.user.name的時(shí)候也不會(huì)觸發(fā)渲染watcher更新，即視圖不會(huì)發(fā)生任何變化。這里需要注意的是，獲取user.name的前提是需要獲取user這個(gè)對(duì)象，而上面我們已經(jīng)提到過的childObj在這里就起作用了，它會(huì)在獲取user的時(shí)候，執(zhí)行childObj.dep.depend()，建立與渲染watcher 的關(guān)系。最后user形式如下：

user: {
  // __ob__是Observer，里面的dep記錄著相應(yīng)的watcher
    __ob__: Observer
}

當(dāng)我們使用$set的時(shí)候，觸發(fā)的Watcher更新，實(shí)際上就是這里的渲染Watcher更新，所以user.name也會(huì)隨之更新。又因?yàn)?code>$set將name設(shè)置為響應(yīng)式了，所以后續(xù)更改user.name視圖也會(huì)更新。這就是$set妙處所在了。另外$del的實(shí)現(xiàn)也相差不多，最終也會(huì)通知watcher更新，這里不做過多介紹了，有興趣的可以自己看源碼了解一下。

Dep類

Dep類是在./dep.js文件下單獨(dú)定義的：

export default class Dep {
  static target: ?Watcher;
  id: number;
  subs: Array<Watcher>;

  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 () {
    const subs = this.subs.slice()
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}

看過《響應(yīng)式原理上篇》的同學(xué)應(yīng)該知道，上篇的實(shí)現(xiàn)與這里幾乎相差無幾，所以還有不了解Dep實(shí)現(xiàn)細(xì)節(jié)的同學(xué)，可以閱讀一下本系列文章的《響應(yīng)式原理上篇》。這里主要介紹一下另外一個(gè)細(xì)節(jié)：

Dep.target = null
const targetStack = []

export function pushTarget (target: ?Watcher) {
  targetStack.push(target)
  Dep.target = target
}

export function popTarget () {
  targetStack.pop()
  Dep.target = targetStack[targetStack.length - 1]
}

我們知道Dep.target代表的是當(dāng)前的Watcher，那么這里為什么要用棧的形式來處理target呢？

試想一個(gè)場(chǎng)景：當(dāng)前Dep.target存在時(shí)，我們想執(zhí)行某段代碼，但并不想要進(jìn)行依賴搜集，此時(shí)用棧的優(yōu)點(diǎn)就體現(xiàn)出來了。我們可以往棧里推入一個(gè)null，即targetStack為[watcher, null]那么在執(zhí)行后續(xù)代碼時(shí)，取得的當(dāng)前target也就是最后一個(gè)target為null，那么就不會(huì)進(jìn)行依賴搜集了。當(dāng)這段代碼執(zhí)行完成后，我們把null彈出去，即targetStack為[watcher]，這時(shí)target就又會(huì)恢復(fù)原來的watcher，后續(xù)代碼就可以正常進(jìn)行依賴搜集了。

Watcher類

Watcher類定義在./watcher.js文件，相較于Dep類，Watcher類則顯得復(fù)雜許多。我們先看看Watcher的constructor:

// 渲染 watcher
if (isRenderWatcher) {
    vm._watcher = this
}
vm._watchers.push(this)

首先如果是渲染Watcher，則會(huì)單獨(dú)記錄到vm實(shí)例上，因此可以通過調(diào)用vm._watcher強(qiáng)制重新渲染界面，這也是$forceUpdate的核心實(shí)現(xiàn)原理。而所有的Watcher都被記錄到vm._watchers上，方便后續(xù)移除相應(yīng)的Watcher。

接下來是options的一些處理：

    // watcher 觸發(fā)后的回調(diào)函數(shù)
    this.cb = cb
    this.id = ++uid // uid for batching
        // watcher 是否還能使用
    this.active = true
        // 是否是惰性計(jì)算
    this.dirty = this.lazy // for lazy watchers
        // 上一次計(jì)算搜集的依賴
    this.deps = []
        // 當(dāng)前計(jì)算搜集的依賴
    this.newDeps = []
        // 上一次計(jì)算搜集的依賴id
    this.depIds = new Set()
    // 當(dāng)前計(jì)算搜集的依賴id
    this.newDepIds = new Set()
    this.expression = process.env.NODE_ENV !== 'production'
      ? expOrFn.toString()
      : ''
    // parse expression for getter
    if (typeof expOrFn === 'function') {
      // 如果是函數(shù)，直接賦值即可
      this.getter = expOrFn
    } else {
      // 解析 'a.b.c' 的形式，取得對(duì)應(yīng)函數(shù)
      this.getter = parsePath(expOrFn)
      if (!this.getter) {
        this.getter = noop
        process.env.NODE_ENV !== 'production' && warn(
          `Failed watching path: "${expOrFn}" ` +
          'Watcher only accepts simple dot-delimited paths. ' +
          'For full control, use a function instead.',
          vm
        )
      }
    }

這里的dirty是computed計(jì)算屬性實(shí)現(xiàn)的關(guān)鍵，我們將會(huì)在下一章進(jìn)行講解，這里先放一放。

另外，deps和newDeps分別記錄了上一次計(jì)算和當(dāng)前計(jì)算搜集的依賴.這是因?yàn)槊看斡?jì)算的時(shí)候，搜集的依賴可能不一樣，所以每次計(jì)算的時(shí)候，都會(huì)將新的依賴重新記錄一遍：

addDep (dep: Dep) {
    const id = dep.id
    // 如果新的 dep 中不包含該 dep，則添加該 dep
    if (!this.newDepIds.has(id)) {
      this.newDepIds.add(id)
      this.newDeps.push(dep)
      // 如果舊的 dep 中不包含該 dep，則在dep 里添加該 watcher
      if (!this.depIds.has(id)) {
        dep.addSub(this)
      }
    }
  }

而在每次計(jì)算完畢后，又會(huì)將新的依賴賦值給舊的依賴，將新的依賴置空：

  // 進(jìn)行依賴搜集
  get () {
    // 標(biāo)明當(dāng)前正在執(zhí)行的 watcher
    pushTarget(this)
    let value
    const vm = this.vm
    try {
      // 進(jìn)行依賴搜集
      value = this.getter.call(vm, vm)
    } catch (e) { 
      if (this.user) {
        handleError(e, vm, `getter for watcher "${this.expression}"`)
      } else {
        throw e
      }
    } finally {
      // 如果 deep 為 true 的話，會(huì)循環(huán)遍歷獲取對(duì)象里的每一個(gè)值，
      // 從而觸發(fā)每一個(gè)相關(guān)的 watcher 進(jìn)行 update
      if (this.deep) {
        traverse(value)
      }
      // 當(dāng)前正在執(zhí)行的 watcher 結(jié)束，不需要標(biāo)明了
      popTarget()
      // 搜集完依賴后，清除依賴
      this.cleanupDeps()
    }
    return value
  }

  // 計(jì)算完成后，將新 deps 賦值給舊 deps, 移除新 deps
  cleanupDeps () {
    let i = this.deps.length
    // 清除在新 deps 中不存在的舊 dep
    while (i--) {
      const dep = this.deps[i]
      if (!this.newDepIds.has(dep.id)) {
        dep.removeSub(this)
      }
    }
    // 將新 deps 賦值給舊 deps, 移除新 deps
    let tmp = this.depIds
    this.depIds = this.newDepIds
    this.newDepIds = tmp
    this.newDepIds.clear()
    tmp = this.deps
    this.deps = this.newDeps
    this.newDeps = tmp
    this.newDeps.length = 0
  }

注意，這里有個(gè)細(xì)節(jié)就是deep代表深度搜集依賴。例如 { user: { name: { first: 'a' } } }這個(gè)對(duì)象，如果我們獲取user時(shí)，這時(shí)只會(huì)將user作為依賴項(xiàng)進(jìn)行搜集。但是如果deep為true時(shí)，會(huì)調(diào)用traverse方法，該方法會(huì)遍歷對(duì)象，將對(duì)象內(nèi)部所有的鍵值（如user的name和name的first）獲取一遍，這個(gè)獲取的過程也就是搜集依賴的過程，所以最終會(huì)將對(duì)象內(nèi)所有字段全做為依賴搜集。

Watcher類剩下沒介紹的主要就是update方法了：

  update () {
    if (this.lazy) {
      this.dirty = true
    } else if (this.sync) {
      this.run()
    } else {
      queueWatcher(this)
    }
  }

可以看出，這里有三種情況，我們將會(huì)在下一章結(jié)合數(shù)據(jù)初始化過程分別講講這三種情況，并學(xué)習(xí)computed和watch兩個(gè)方法的具體實(shí)現(xiàn)。

總結(jié)

這一章我們主要通過源碼的角度，分別了解了observe，Observer類，defineReactive，$set/$del，Dep類，Watcher類的實(shí)現(xiàn)，以及介紹了Vue做的一些特殊處理，比如變異數(shù)組的攔截等。建議最好是能夠親自動(dòng)手調(diào)試一下源碼，才能更好的理解這幾者之間的關(guān)系。

下一章我們將會(huì)回到Vue的實(shí)例化過程，看看再實(shí)例化過程中，到底是如何處理數(shù)據(jù)響應(yīng)式的，同時(shí)我們也會(huì)徹底地理解computed和watch兩個(gè)方法的具體實(shí)現(xiàn)過程。

最后，如果你覺得這篇文章對(duì)你有所幫助，可以點(diǎn)贊/關(guān)注/收藏三連哦！碼字不易，你的支持和喜歡是對(duì)我最大的鼓勵(lì)~~

響應(yīng)式原理中篇.png

如果你有任何疑問都可以在評(píng)論區(qū)留言，我都會(huì)一一查看。如果你也是前端的愛好者，可以私信我進(jìn)群和其他人一起交流，一起在前端的路上學(xué)習(xí)提升自己！