7. 深入响应式系统构建-上 - 7.6 极简风的响应式系统 - 《深入剖析Vue源码》

7.6 极简风的响应式系统

7.6 极简风的响应式系统

Vue的响应式系统构建是比较复杂的，直接进入源码分析构建的每一个流程会让理解变得困难，因此我觉得在尽可能保留源码的设计逻辑下,用最小的代码构建一个最基础的响应式系统是有必要的。对Dep,Watcher,Observer概念的初步认识，也有助于下一篇对响应式系统设计细节的分析。

7.6.1 框架搭建

我们以MyVue作为类响应式框架，框架的搭建不做赘述。我们模拟Vue源码的实现思路，实例化MyVue时会传递一个选项配置，精简的代码只有一个id挂载元素和一个数据对象data。模拟源码的思路，我们在实例化时会先进行数据的初始化，这一步就是响应式的构建，我们稍后分析。数据初始化后开始进行真实DOM的挂载。

var vm = new MyVue({
  id: '#app',
  data: {
    test: 12
  }
})
// myVue.js
(function(global) {
  class MyVue {
      constructor(options) {
        this.options = options;
        // 数据的初始化
        this.initData(options);
        let el = this.options.id;
        // 实例的挂载
        this.$mount(el);
      }
      initData(options) {
      }
      $mount(el) {
      }
    }
}(window))

7.6.2 设置响应式对象 - Observer

首先引入一个类Observer,这个类的目的是将数据变成响应式对象，利用Object.defineProperty对数据的getter,setter方法进行改写。在数据读取getter阶段我们会进行依赖的收集，在数据的修改setter阶段，我们会进行依赖的更新(这两个概念的介绍放在后面)。因此在数据初始化阶段，我们会利用Observer这个类将数据对象修改为相应式对象，而这是所有流程的基础。

class MyVue {
  initData(options) {
    if(!options.data) return;
    this.data = options.data;
    // 将数据重置getter，setter方法
    new Observer(options.data);
  }
}
// Observer类的定义
class Observer {
  constructor(data) {
    // 实例化时执行walk方法对每个数据属性重写getter，setter方法
    this.walk(data)
  }
  walk(obj) {
    const keys = Object.keys(obj);
    for(let i = 0;i< keys.length; i++) {
      // Object.defineProperty的处理逻辑
      defineReactive(obj, keys[i])
    }
  }
}

7.6.3 依赖本身 - Watcher

我们可以这样理解，一个Watcher实例就是一个依赖，数据不管是在渲染模板时使用还是在用户计算时使用，都可以算做一个需要监听的依赖，watcher中记录着这个依赖监听的状态，以及如何更新操作的方法。

// 监听的依赖
class Watcher {
  constructor(expOrFn, isRenderWatcher) {
    this.getter = expOrFn;
    // Watcher.prototype.get的调用会进行状态的更新。
    this.get();
  }
  get() {}
}

那么哪个时间点会实例化watcher并更新数据状态呢？显然在渲染数据到真实DOM时可以创建watcher。$mount流程前面章节介绍过，会经历模板生成render函数和render函数渲染真实DOM的过程。我们对代码做了精简，updateView浓缩了这一过程。

class MyVue {
  $mount(el) {
    // 直接改写innerHTML
    const updateView = _ => {
      let innerHtml = document.querySelector(el).innerHTML;
      let key = innerHtml.match(/{(\w+)}/)[1];
      document.querySelector(el).innerHTML = this.options.data[key]
    }
    // 创建一个渲染的依赖。
    new Watcher(updateView, true)
  }
}

7.6.4 依赖管理 - Dep

watcher如果理解为每个数据需要监听的依赖，那么Dep 可以理解为对依赖的一种管理。数据可以在渲染中使用，也可以在计算属性中使用。相应的每个数据对应的watcher也有很多。而我们在更新数据时，如何通知到数据相关的每一个依赖，这就需要Dep进行通知管理了。并且浏览器同一时间只能更新一个watcher,所以也需要一个属性去记录当前更新的watcher。而Dep这个类只需要做两件事情，将依赖进行收集，派发依赖进行更新。

let uid = 0;
class Dep {
  constructor() {
    this.id = uid++;
    this.subs = []
  }
  // 依赖收集
  depend() {
    if(Dep.target) {
      // Dep.target是当前的watcher,将当前的依赖推到subs中
      this.subs.push(Dep.target)
    }
  }
  // 派发更新
  notify() {
    const subs = this.subs.slice();
    for (var i = 0, l = subs.length; i < l; i++) { 
      // 遍历dep中的依赖，对每个依赖执行更新操作
      subs[i].update();
    }
  }
}
Dep.target = null;

7.6.5 依赖管理过程 - defineReactive

我们看看数据拦截的过程。前面的Observer实例化最终会调用defineReactive重写getter,setter方法。这个方法开始会实例化一个Dep,也就是创建一个数据的依赖管理。在重写的getter方法中会进行依赖的收集，也就是调用dep.depend的方法。在setter阶段，比较两个数不同后，会调用依赖的派发更新。即dep.notify

const defineReactive = (obj, key) => {
  const dep = new Dep();
  const property = Object.getOwnPropertyDescriptor(obj);
  let val = obj[key]
  if(property && property.configurable === false) return;
  Object.defineProperty(obj, key, {
    configurable: true,
    enumerable: true,
    get() {
      // 做依赖的收集
      if(Dep.target) {
        dep.depend()
      }
      return val
    },
    set(nval) {
      if(nval === val) return
      // 派发更新
      val = nval
      dep.notify();
    }
  })
}

回过头来看watcher,实例化watcher时会将Dep.target设置为当前的watcher,执行完状态更新函数之后，再将Dep.target置空。这样在收集依赖时只要将Dep.target当前的watcher push到Dep的subs数组即可。而在派发更新阶段也只需要重新更新状态即可。

class Watcher {
  constructor(expOrFn, isRenderWatcher) {
    this.getter = expOrFn;
    // Watcher.prototype.get的调用会进行状态的更新。
    this.get();
  }
  get() {
    // 当前执行的watcher
    Dep.target = this
    this.getter()
    Dep.target = null;
  }
  update() {
    this.get()
  }
}

7.6.6 结果

一个极简的响应式系统搭建完成。在精简代码的同时，保持了源码设计的思想和逻辑。有了这一步的基础，接下来深入分析源码中每个环节的实现细节会更加简单。