vue中的觀察者模式和釋出訂閱者模式

阿新 • • 發佈：2021-10-21

觀察者模式

目標者物件和觀察者物件有相互依賴的關係，觀察者對某個物件的狀態進行觀察，如果物件的狀態發生改變，就會通知所有依賴這個物件的觀察者，

目標者物件Subject，擁有方法：新增 / 刪除 / 通知Observer；

觀察者物件Observer，擁有方法：接收Subject狀態變更通知並處理；

目標物件Subject狀態變更時，通知所有Observer。

Vue中響應式資料變化是觀察者模式每個響應式屬性都有dep，dep存放了依賴這個屬性的watcher，watcher是觀測資料變化的函式，如果資料發生變化，dep就會通知所有的觀察者watcher去呼叫更新方法。因此，觀察者需要被目標物件收集，目的是通知依賴它的所有觀察者。那為什麼watcher也要存放dep呢？是因為當前正在執行的watcher需要知道此時是哪個dep通知了自己。

在beforeCreate之後，created之前呼叫observe(data)初始化響應式資料，以下是簡化版程式碼（沒有處理陣列的劫持）

class Observer {
    // 需要對value的屬性描述重新定義
    constructor(value) {
      this.walk(value); // 初始化的時候就對資料進行監控
    }
    walk(data) {
      Object.keys(data).forEach((key) => {
        defineReactive(data, key, data[key]);
      });
    }
  }
  
   
function defineReactive(data, key, value) {
    // value 可能是一個物件,要遞迴劫持，所以資料不能巢狀太深
    observe(value);
    let dep = new Dep();
    Object.defineProperty(data, key, {
      get() {
        // 如果有 watcher，就讓 watcher 記住 dep，防止產生重複的 dep, 同時 dep 也收集此 watcher
        if (Dep.target) {
          dep.depend();
        }
         
return value;
      },
      set(newVal) {
        // 資料沒變動則不處理
        if (value === newVal) return;
        observe(newVal); // 如果新值是個物件，遞迴攔截
        value = newVal; // 設定新的值
        dep.notify(); // 通知收集的 watcher 去更新
      },
    });
}
function observe(data) {
    // 不是物件則不處理，isObject是用來判斷是否為物件的函式
    if (Object.prototype.toString.call(data)!== '[object Object]') return;
    // 通過類來實現資料的觀測，方便擴充套件，生成例項
    return new Observer(data);
}
observe(data)

在created之後，mouted之前呼叫mountComponent掛載元件，以下是簡化版程式碼（沒有處理watch和computed的watcher）

class Dep {
    static target = null
    constructor() {
      this.id = id++;
      this.subs = []; // 存放依賴的watcher
    }
    depend() {
      // 讓正在執行的watcher記錄dep，同時dep也會記錄watcher
      Dep.target.addDep(this);
    }
    addSub(watcher) {
      // 新增觀察者物件
      this.subs.push(watcher);
    }
    notify() {
      // 觸發觀察者物件的更新方法
      this.subs.forEach((watcher) => watcher.update());
    }
}
class Watcher {
    constructor(vm, exprOrFn) {
      this.vm = vm;
      this.deps = [];
      // 用來去重，防止多次取同一資料時存入多個相同dep
      this.depId = new Set();
      // exprOrFn是updateComponent
      this.getter = exprOrFn;
      // 更新頁面
      this.get();
    }
    get() {
      Dep.target = watcher; // 取值之前，收集 watcher
      this.getter.call(this.vm); // 呼叫updateComponent更新頁面
      Dep.target = null; // 取值完成後，將 watcher 刪除
    }
    // dep.depend執行時呼叫
    addDep(dep) {
        let id = dep.id;
        let has = this.depId.has(id);
        if (!has) {
            this.depId.add(id);
            // watcher存放dep
            this.deps.push(dep);
            // dep存放watcher
            dep.addSub(this);
        }
    }  
    // 更新頁面方法，dep.notify執行時呼叫
    update() {
        this.get(); // 一修改資料就渲染更新
    }
}
function mountComponent(vm) {
    // 渲染更新頁面
    let updateComponent = () => {
      let vnode = vm._render(); // 生成虛擬節點 vnode
      vm._update(vnode); // 將vnode轉為真實節點
    };
    // 每個元件都要呼叫一個渲染 watcher
    new Watcher(vm, updateComponent);
}
mountComponent(vm)

釋出訂閱模式

基於一個事件中心，接收通知的物件是訂閱者，需要先訂閱某個事件，觸發事件的物件是釋出者，釋出者通過觸發事件，通知各個訂閱者。 js中事件繫結，就是釋出訂閱模式

釋出訂閱模式相比觀察者模式多了個事件中心，訂閱者和釋出者不是直接關聯的。

vue中的事件匯流排就是使用的釋出訂閱模式

// 事件匯流排
class Bus {
  constructor() {
    // 用來記錄事件和監聽該事件的陣列
    this.listeners = {};
  }
  // 新增指定事件的監聽者
  $on(eventName, handler) {
    this.listeners[eventName].add(handler);
  }
  // 取消監聽事件
  $off(eventName, handler) {
    this.listeners[eventName].delete(handler);
  }
  // 觸發事件
  $emit(eventName, ...args) {
    this.listeners[eventName].forEach((fn) => fn(...args));
  }
}