vue2响应式原理----发布订阅模式

很多人感觉vue2的响应式其实用到了观察者+发布订阅。我们先来看一下简单的发布订阅的代码：

// 调度中心
class Dep {
    static subscribes = {}
    // 订阅所有需求
    static subscribe (key, demand) {
      // 对需求分类收集
      if (!Dep.subscribes[key]) Dep.subscribes[key] = []
      Dep.subscribes[key].push(demand)
    }
    // 对所有订阅者发布通知
    static publish (key, age) {
      if (!Dep.subscribes[key]) return
      for (const demand of Dep.subscribes[key]) {
        demand(age)
      }
    }
  }
  // 找对象的猎手类
  class Watcher {
    constructor (name, age) {
      this.name = name // 名字
      this.age = age // 年龄
    }
    // 订阅，由调度中心将猎手需求分类并存放到全局
    subscribe (key, demand) {
      Dep.subscribe(key, demand)
    }
    // 发布，由调度中心将同分类下的需求全部触发
    publish (key, age) {
      Dep.publish(key, age)
    }
  }
  // 猎手注册
  const aa = new Watcher('aa', 18)
  const bb = new Watcher('bb', 20)
  // 猎手订阅自己感兴趣的人
  aa.subscribe('key', function (age) {
    if (age === aa.age) console.log(`我是aa，我们都是${age}`)
    else console.log(`我是aa，我们年龄不同`)
  })
  bb.subscribe('key', function (age) {
    if (age === bb.age) console.log(`我是bb，我们都是${age}`)
    else console.log(`我是bb，我们年龄不同`)
  })
  // 红娘注册
  const red = new Watcher('red', 35)
  // 红娘发布信息
  red.publish('key', 20)
  // 我是aa，我们年龄不同
  // 我是bb，我们都是20

从上面中发现一个重要的点，发布者和订阅者是根据key值来区分的，然后通过消息中心来中转的，他们家是是实现不知道对方是谁。
而观察者模式中观察者是一开始就知道自己观察的是谁。

上面其实就是简易版的vue原理中发布订阅那段，我们接下来看完整过程。

Vue2 的响应式

创建一个 Observer 对象，它的主要作用是给对象的每个属性添加 getter 和 setter 方法。
在 getter 和 setter 方法中分别进行依赖的收集和派发更新。
创建 Watcher 对象，用于监听数据的变化，当数据发生任何变化时，Watcher 对象会触发自身的回调函数。
在模板解析阶段，对模板中使用到的数据进行依赖的收集，即收集 Watcher 对象。
当数据发生变化时，Observer 对象会通知 Dep 对象调用 Watcher 对象的回调函数进行更新操作，即派发更新。
更新完毕后，Vue2 会进行视图的重新渲染，从而实现响应式。

下面是一个基于 Object.defineProperty 实现响应式的示例，仅供参考：

function observe(obj) {
  if (!obj || typeof obj !== 'object') {
    return;
  }
  Object.keys(obj).forEach(key => {
    // 尝试递归处理
    observe(obj[key]);
    let val = obj[key];
    const dep = new Dep(); // 新建一个依赖
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get() {
        if (Dep.target) {
          dep.depend(); // 收集依赖
        }
        return val;
      },
      set(newVal) {
        if (newVal === val) {
          return;
        }
        val = newVal;
        dep.notify(); // 派发更新
      }
    });
  });
}
 
// 依赖类
class Dep {
  constructor() {
    this.subs = [];
  }
  addSub(sub) {
    this.subs.push(sub);
  }
  removeSub(sub) {
    const index = this.subs.indexOf(sub);
    if (index !== -1) {
      this.subs.splice(index, 1);
    }
  }
  depend() {
    if (Dep.target) {
      Dep.target.addDep(this);
    }
  }
  notify() {
    this.subs.forEach(sub => sub.update());
  }
}
 
Dep.target = null;
 
// 观察者类
class Watcher {
  constructor(vm, expOrFn, callback) {
    this.vm = vm;
    this.getter = parsePath(expOrFn);
    this.callback = callback;
    this.value = this.get(); // 初始化，触发依赖
  }
  get() {
    Dep.target = this; // 设置当前依赖
    const value = this.getter.call(this.vm, this.vm); // 触发 getter
    Dep.target = null; // 清除当前依赖
    return value;
  }
  addDep(dep) {
    dep.addSub(this);
  }
  update() {
    const oldValue = this.value;
    this.value = this.get(); // 重新获取
    this.callback.call(this.vm, this.value, oldValue); // 触发回调
  }
}
 
// 解析路径
function parsePath(expOrFn) {
  if (typeof expOrFn === 'function') {
    return expOrFn;
  }
  const segments = expOrFn.split('.');
  return function(obj) {
    for (let i = 0; i < segments.length; i++) {
      if (!obj) {
        return;
      }
      obj = obj[segments[i]];
    }
    return obj;
  };
}
 
// 测试
const obj = { foo: 'foo', bar: { a: 1 } };
observe(obj);
new Watcher(obj, 'foo', (val, oldVal) => {
  console.log(`foo changed from ${oldVal} to ${val}`);
});
new Watcher(obj, 'bar.a', (val, oldVal) => {
  console.log(`bar.a changed from ${oldVal} to ${val}`);
});
 
obj.foo = 'FOO'; // 输出 `foo changed from foo to FOO`
obj.bar.a = 2; // 输出 `bar.a changed from 1 to 2`

以上代码中，函数 observe 用于递归遍历对象属性，把其进行劫持，包括收集依赖和派发更新；类 Dep 代表一个依赖，其中 addSub 用于添加订阅者实例，removeSub 用于移除订阅者实例，depend 用于收集依赖，即把当前依赖加到对应的订阅者中，notify 用于派发更新，即遍历所有订阅者，并触发其回调函数。类 Watcher 则代表一个订阅者，其中 getter 用于获取数据，callback 用于回调函数，addDep 用于添加依赖，即把当前订阅者添加到对应的依赖中，update 用于更新值，并触发相应的回调函数，如有必要。函数 parsePath 则用于解析路径字符串，返回对应属性的值。

例子中我们对对象 obj 进行了劫持，同时创建了两个观察者，分别对应 foo 和 bar.a 两个属性。当其中任意一个属性的值发生变化时，其对应的依赖都会被更新，从而触发其绑定的观订阅者的回调函数。

简单来说，在 Vue2 响应式系统中，当数据发生改变时，会触发 get 和 set 方法，get 方法会收集所有依赖该数据的 Watcher 对象，set 方法会通知 Dep 对象触发所有 Watcher 对象的回调函数进行更新。如此循环，实现了数据的响应式。

在这里插入图片描述