Vue.js Watch中的 deep:true 是如何實現的

當用戶指定了watch中的deep屬性為true時，如果當前監控的值是數組類型。會對對象中的每一項進行求值，此時會將當前watcher存入到對應屬性的依賴中，這樣數組中對象發生變化時也會通知數據更新

對應源碼

get () {
    pushTarget(this) // 先將當前依賴放到 Dep.target上
    let value
    const vm = this.vm
    try {
      value = this.getter.call(vm, vm)
    } catch (e) {
      if (this.user) {
        handleError(e, vm, `getter for watcher "${this.expression}"`)
      } else {
        throw e
      }
    } finally {
      if (this.deep) { // 如果需要深度監控
        traverse(value) // 會對對象中的每一項取值,取值時會執行對應的get方法
      }
      popTarget()
    }
    return value
}
function _traverse (val: any, seen: SimpleSet) {
  let i, keys
  const isA = Array.isArray(val)
  if ((!isA && !isObject(val)) || Object.isFrozen(val) || val instanceof VNode) {
    return
  }
  if (val.__ob__) {
    const depId = val.__ob__.dep.id
    if (seen.has(depId)) {
      return
    }
    seen.add(depId)
  }
  if (isA) {
    i = val.length
    while (i--) _traverse(val[i], seen)
  } else {
    keys = Object.keys(val)
    i = keys.length
    while (i--) _traverse(val[keys[i]], seen)
  }
}