Vue2.0的响应式原理

Vue2.0 响应式的基本原理是利用了 Object.defineProperty 方法

利用这个方法对 data 返回的对象进行深度遍历，给每一个属性重写 get 和 set方法，遍历时：

首先为每个属性创建一个依赖收集器，在 get 方法中将使用了这个属性的所有单位（可以称之为订阅者）收集起来，

然后在 set 方法中判断这个属性的值是否改变，如果改变了则通知所有订阅者执行更新方法。

这也叫 发布订阅模式

看下简单的模拟代码：

// 首先定义一个依赖收集器对象，用于存放订阅者，以及触发更新
class Dep {
  constructor() {
    this.subs = []
  }
  addSub(sub) {
    this.subs.push(sub)
  }
  notify() {
    // 数据更新时，触发所有订阅者进行更新
    this.subs.forEach(sub => {
      sub.update()
    })
  }
}
// 观察者对象
class Watcher {
  constructor() {
    Dep.target = this;
  }
  update() {
    console.log('视图更新')
  }
}

// 观察方法
function observer(value) {
  if (!value || (typeof value !== 'object')) {
    return;
  }

  Object.keys(value).forEach((key) => {
    defineReactive(value, key, value[key]);
  });
}

function defineReactive(obj, key, val) {
  const dep = new Dep(); // 采用闭包的方式初始化一个依赖收集器

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      dep.addSub(Dep.target);
      return val;
    },
    set: function reactiveSetter(newVal) {
      if (newVal === val) return;
      val = newVal;
      dep.notify(); // 监测到有数据更新的时候，执行更新
    }
  });
}

class Vue {
  constructor(options) {
    this._data = options.data;
    observer(this._data);
    new Watcher();
    console.log('render~', this._data.test);
  }
}

let o = new Vue({
  data: {
    test: "I am test."
  }
});
o._data.test = "hello,test.";

Dep.target = null;