学习 Vue 中观察者模式

贴一个 Vue 中源码的观察者模式源码

image.png

手动实现观察者模式

// 发布者-目标
class Dep {
  constructor() {
    // 记录所有的订阅者
    this.subs = []
  }
  // 添加订阅者
  addSub(sub) {
    // 判断订阅者是否存在，并且有update 方法
    if (sub && sub.update) {
      this.subs.push(sub)
    }
  }
  // 发布通知
  notify() {
    // 循环发布通知
    this.subs.forEach(s => {
      s.update()
    })
  }
}

// 订阅者-观察者
class Watcher {
  update() {
    console.log('update --->')
  }
}

let dep = new Dep
let watcher = new Watcher
// 添加订阅者
dep.addSub(watcher)
// 发布执行
dep.notify()

// 执行结果 update --->

观察者模式和订阅发布模式的区别

• 观察者模式是由具体的目标调用，例如：当事件触发 Dep 就会去调用观察者的方法，所以订阅者和观察者之间是存在依赖的。
• 发布订阅模式是由统一的调度中心调用，因为发布者和订阅者不需要知道对方的存在。
  点击查看发布订阅模式