Vue源码学习4-响应式原理-Dep

前言

这篇文章就简单介绍一下Dep这个class，无需细看

--以下所有代码来自Vue 2.6.11 版本

贴源码

Dep 是在这个文件中定义的 src/core/observer/dep.js ，代码不多。

Dep是干嘛的？它是用来和 Watcher 配合使用的，对 data props 做数据监测，data/props中的每一个字段都会被绑定一个Dep对象，无论是基本数据类型还是 Object 这样的引用数据类型，都会绑定，这一切都发生在 defineReactive 方法中。

1：找到其中的 target 这个静态变量，它非常重要，它指向的是一个Watcher对象，new Watcher 得到的对象。

在 defineReactive 的源码中，能在 Object.defineProperty 那段逻辑中找到 Dep.target 的使用，一个简单的判断，这里是 依赖收集 的关键点，这里暂时不深究了，记住这段逻辑就行了

2：找到其中一个名叫 targetStack 的数组，它也非常重要，虽然它是个数组，但他所有的操作都是按照栈这种数据结构的操作规范来的

（栈是什么东西？贴一张别人的图，其余的细节，自行查阅啦）

不同的Watcher对象在new Vue 的过程中会按照栈的运行规律，不停的压栈出栈

压栈出栈使用的方法就是 pushTarget 和 popTarget，可以看到压栈 pushTarget 的入参就是 Watcher 对象

3：其余的方法现在提了也没啥用，需结合 依赖收集 和 派发更新 操作才能了解这些方法的作用

import type Watcher from './watcher'
import { remove } from '../util/index'
import config from '../config'

let uid = 0
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 () {
    // stabilize the subscriber list first
    const subs = this.subs.slice()
    if (process.env.NODE_ENV !== 'production' && !config.async) {
      subs.sort((a, b) => a.id - b.id)
    }
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}
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]
}