vuejs源码关于observer部分的dep有什么作用

Question

observer类:

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)
    }
  }

这里的dep属性有什么作用呢？
我知道defineReactive方法会改造getter setter方法来收集依赖和通知watcher，但是这个方法里都是用的闭包里的dep来操作的，为什么还要在observer里面声明一个dep实例呢？

Answer 1

这个dep属性是在Vue.$set和$delete中用到的。如$set中倒数第二行代码

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)}`)
  }
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, val)
    return val
  }
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  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
  }
  if (!ob) {
    target[key] = val
    return val
  }
  defineReactive(ob.value, key, val)
  ob.dep.notify() // 这里的dep指的就是楼主所问的dep属性
  return val
}

Answer 2

Dep是一个观察者模式的class，初始化的时候将Watcher添加到sub数组中，数据改变时触发Dep的notify，执行Watcher，vue 更新view就是这样做的