Vue源码系列之 Dep类

前言

首先我们先看看以下的脑图

目前我们已经实现了 vue、Compiler、Observer类

本章我们要实现 Dep（发布者）类

Dep

• 功能

  • 收集依赖，添加观察者(Watcher)
  • 通知所有观察者

• 结构

  

代码

代码其实很简单（因为是简单版的）

class Dep {
  constructor() {
    this.subs = []
  }
  addSub(sub) {
    if (sub && sub.update) {
      this.subs.push(sub)
    }
  }
  // 发送通知
  notify() {
    this.subs.forEach(sub => {
      sub.update()
    })
  }
}

但是我们该怎么调用呢？ 我们需要进入observer类中

我们需要在 get中收集依赖，在set中通知依赖更新

defineReactive(data, key, value) {
    ...
    // 负责收集依赖，并发送通知
    let dep = new Dep()
    ...
     get() {
        // 收集依赖
        Dep.target && dep.addSub(Dep.target)
        return value
      },
    set(newValue) {
        ...
        // 发送通知
        dep.notify()
      }
  }