观察者模式 vs 发布订阅模式深度对比

// 观察者模式
class Subject {
  constructor() { this.observers = []; }
  add(obs) { this.observers.push(obs); }
  remove(obs) { this.observers = this.observers.filter(o => o !== obs); }
  notify(data) { this.observers.forEach(o => o.update(data)); }
}
class Observer {
  constructor(name) { this.name = name; }
  update(data) { console.log(`${this.name} received:`, data); }
}

// 发布订阅模式
class EventBus {
  constructor() { this.events = {}; }
  on(event, fn) { (this.events[event] ||= []).push(fn); }
  off(event, fn) { 
    if (!this.events[event]) return;
    this.events[event] = this.events[event].filter(f => f !== fn);
  }
  emit(event, data) { (this.events[event] || []).forEach(fn => fn(data)); }
}

核心区别：1) 观察者模式中Subject直接维护Observer列表，两者相互感知；发布订阅模式通过EventBus中介解耦，发布者和订阅者互不知晓。2) 观察者模式是同步的、点对点的；发布订阅支持异步和事件通道(topic)过滤。3) Vue2响应式使用观察者模式，EventBus使用发布订阅模式。