Vue 的数据绑定机制#

1export default class Dep {
2  static target?: Watcher;
3  subs: Array<Watcher>;
4
5  constructor () {
6    this.subs = []
7  }
8
9  /**
10   * 添加订阅者（watcher）
11   **/
12  addSub (sub: Watcher) {
13    this.subs.push(sub)
14  }
15
16  /**
17   * 移除订阅者（watcher）
18   **/
19  removeSub (sub: Watcher) {
20    remove(this.subs, sub)
21  }
22
23  /**
24   * 添加订阅（调用订阅者上的 addDep 方法）
25   **/
26  depend () {
27    if (Dep.target) {
28      Dep.target.addDep(this)
29    }
30  }
31
32  /**
33   * 遍历通知订阅者更新
34   **/
35  notify () {
36    const subs = this.subs.slice()
37    for (let i = 0, l = subs.length; i < l; i++) {
38      subs[i].update()
39    }
40  }
41}
42
43Dep.target = null

1/**
2 * 生成响应式对象
3 * 为了方便理解，以下代码略有修改，省略了部分不相关内容
4 */
5export function defineReactive (
6  obj: Object,
7  key: string,
8  val: any,
9) {
10  const dep = new Dep()
11  Object.defineProperty(obj, key, {
12    enumerable: true,
13    configurable: true,
14    get: function reactiveGetter () {
15      // 每次 get 时如果有订阅者则添加订阅
16      if (Dep.target) {
17        dep.depend()
18      }
19      return val
20    },
21    set: function reactiveSetter (newVal) {
22      val = newVal
23      // 每次更新数据之后广播更新
24      dep.notify()
25    }
26  })
27}

1/**
2 * 为了方便理解，以下代码略有修改，省略了部分不相关内容
3 */
4export default class Watcher {
5  vm: Component;
6  getter: Function;
7  value: any;
8  cb: Function;
9
10  constructor (
11    vm: Component,
12    exp: string
13  ) {
14    this.vm = vm
15    this.cb = cb
16    // 获取表达式对应的属性的 getter
17    this.getter = parsePath(exp)
18    this.value = this.get()
19  }
20
21  /**
22   * 获取最新的值
23   **/
24  get () {
25    // 将 Dep 的当前订阅者指向当前 watcher
26    Dep.target = this
27    let value
28    const vm = this.vm
29    // 获取对应属性值
30    value = this.getter.call(vm, vm)
31    // 清空 Dep 当前订阅者
32    Dep.target = null
33    return value
34  }
35
36  /**
37   * 订阅
38   **/
39  addDep (dep: Dep) {
40    // 将当前 watcher 添加到 Dep 的订阅者列表中
41    dep.addSub(this)
42  }
43
44  /**
45   * 更新视图
46   **/
47  update () {
48    const value = this.get()
49    const oldValue = this.value
50    // 调用 callback 更新视图
51    this.cb.call(this.vm, value, oldValue)
52  }
53}