vue2.x Dep

export default class Dep {
  //静态属性 target 用来存放当前正在计算的 Watcher。
  static target?: DepTarget | null
  //构造函数生成，每个Dep实例的唯一ID
  id: number
  //用来存放所有订阅了该 Dep 实例的 Watcher。
  subs: Array<DepTarget | null>
  //pending subs cleanup
  //一个标志位，用来标识是否有订阅者需要被清除。
  _pending = false 

  //构造函数，用来初始化 id 和 subs。
  constructor() {
    this.id = uid++
    this.subs = []
  }

  //添加订阅者，把 Watcher 添加到 subs 中。
  addSub(sub: DepTarget) {
    this.subs.push(sub)
  }

  //移除订阅者，把 Watcher 从 subs 中移除。
  //由于移除订阅者的操作可能会影响到遍历 subs，所以这里采用了标记位的方式，把要移除的 Watcher 标记为 null，然后在下一次 scheduler flush 的时候再进行清除。
  removeSub(sub: DepTarget) {
    // #12696 deps with massive amount of subscribers are extremely slow to
    // clean up in Chromium
    // to workaround this, we unset the sub for now, and clear them on
    // next scheduler flush.
    this.subs[this.subs.indexOf(sub)] = null
    if (!this._pending) {
      this._pending = true
      pendingCleanupDeps.push(this)
    }
  }
  
  //收集依赖，把当前的 Watcher 添加到该 Dep 实例的 subs 中。
  //如果有需要调试的信息（如 onTrack 回调函数），则调用该回调函数。
  depend(info?: DebuggerEventExtraInfo) {
    if (Dep.target) {
      Dep.target.addDep(this)
      if (__DEV__ && info && Dep.target.onTrack) {
        Dep.target.onTrack({
          effect: Dep.target,
          ...info
        })
      }
    }
  }

  //通知更新，当一个 Dep 实例被更新时，它会遍历 subs 中的所有 Watcher，并依次调用它们的 update 方法进行更新。
  //在这个过程中，如果有需要调试的信息（如 onTrigger 回调函数），则调用该回调函数。
  //如果配置中不是异步模式，则需要对 subs 进行排序以确保它们按正确的顺序触发更新。
  notify(info?: DebuggerEventExtraInfo) {
    // stabilize the subscriber list first
    const subs = this.subs.filter(s => s) as DepTarget[]
    if (__DEV__ && !config.async) {
      // subs aren't sorted in scheduler if not running async
      // we need to sort them now to make sure they fire in correct
      // order
      subs.sort((a, b) => a.id - b.id)
    }
    for (let i = 0, l = subs.length; i < l; i++) {
      const sub = subs[i]
      if (__DEV__ && info) {
        sub.onTrigger &&
          sub.onTrigger({
            effect: subs[i],
            ...info
          })
      }
      sub.update()
    }
  }
}

const pendingCleanupDeps: Dep[] = []

export const cleanupDeps = () => {
  for (let i = 0; i < pendingCleanupDeps.length; i++) {
    const dep = pendingCleanupDeps[i]
    dep.subs = dep.subs.filter(s => s)
    dep._pending = false
  }
  pendingCleanupDeps.length = 0
}

// The current target watcher being evaluated.
// This is globally unique because only one watcher
// can be evaluated at a time.
Dep.target = null
const targetStack: Array<DepTarget | null | undefined> = []

export function pushTarget(target?: DepTarget | null) {
  targetStack.push(target)
  Dep.target = target
}

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

pushTarget(watcher);
//操作已经劫持过的值，触发更新
popTarget(watcher);

if(Dep.target) { ... }

get() {
    pushTarget(this)
    ...