Vue的响应式原理（MVVM）深入解析

1. 如何实现一个响应式对象

最近在看 Vue 的源码，其中最核心基础的一块就是 Observer/Watcher/Dep, 简而言之就是，Vue 是如何拦截数据的读写， 如果实现对应的监听，并且特定的监听执行特定的回调或者渲染逻辑的。总的可以拆成三大块来说。这一块，主要说的是 Vue 是如何将一个 plain object 给处理成 reactive object 的，也就是，Vue 是如何拦截拦截对象的 get/set 的

我们知道，用 Object.defineProperty 拦截数据的 get/set 是 vue 的核心逻辑之一。这里我们先考虑一个最简单的情况 一个 plain obj 的数据，经过你的程序之后，使得这个 obj 变成 Reactive Obj (不考虑数组等因素，只考虑最简单的基础数据类型，和对象):

如果这个 obj 的某个 key 被 get, 则打印出 get ${key} - ${val} 的信息
如果这个 obj 的某个 key 被 set, 如果监测到这个 key 对应的 value 发生了变化，则打印出 set ${key} - ${val} - ${newVal} 的信息。
对应的简要代码如下:

Observer.js

export class Observer {
  constructor(obj) {
    this.obj = obj;
    this.transform(obj);
  }
  // 将 obj 里的所有层级的 key 都用 defineProperty 重新定义一遍, 使之 reactive 
  transform(obj) {
    const _this = this;
    for (let key in obj) {
      const value = obj[key];
      makeItReactive(obj, key, value);
    }
  }
}
function makeItReactive(obj, key, val) {
  // 如果某个 key 对应的 val 是 object, 则重新迭代该 val, 使之 reactive 
  if (isObject(val)) {
    const childObj = val;
    new Observer(childObj);
  }
  // 如果某个 key 对应的 val 不是 Object, 而是基础类型，我们则对这个 key 进行 defineProperty 定义 
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: () => {
      console.info(`get ${key}-${val}`)
      return val;
    },
    set: (newVal) => {
      // 如果 newVal 和 val 相等，则不做任何操作(不执行渲染逻辑)
      if (newVal === val) {
        return;
      }
      // 如果 newVal 和 val 不相等，且因为 newVal 为 Object, 所以先用 Observer迭代 newVal, 使之 reactive, 再用 newVal 替换掉 val, 再执行对应操作(渲染逻辑)
      else if (isObject(newVal)) {
        console.info(`set ${key} - ${val} - ${newVal} - newVal is Object`);
        new Observer(newVal);
        val = newVal;
      }
      // 如果 newVal 和 val 不相等，且因为 newVal 为基础类型, 所以用 newVal 替换掉 val, 再执行对应操作(渲染逻辑)
      else if (!isObject(newVal)) {
        console.info(`set ${key} - ${val} - ${newVal} - newVal is Basic Value`);
        val = newVal;
      }
    }
  })
}

function isObject(data) {
  if (typeof data === 'object' && data != 'null') {
    return true;
  }
  return false;
}

index.js

import { Observer } from './source/Observer.js';
// 声明一个 obj,为 plain Object
const obj = {
  a: {
    aa: 1
  },
  b: 2,
}
// 将 obj 整体 reactive 化
new Observer(obj);
// 无输出
obj.b = 2;
// set b - 2 - 3 - newVal is Basic Value
obj.b = 3;
// set b - 3 - [object Object] - newVal is Object
obj.b = {
  bb: 4
}
// get b-[object Object]
obj.b;
// get a-[object Object]
obj.a;
// get aa-1
obj.a.aa
// set aa - 1 - 3 - newVal is Basic Value
obj.a.aa = 3

这样，我们就完成了 Vue 的第一个核心逻辑， 成功把一个任意层级的 plain object 转化成 reactive object

2. 如何实现一个 watcher

前面讲的是如何将 plain object 转换成 reactive object. 接下来讲一下，如何实现一个watcher.

实现的伪代码应如下:

伪代码

// 传入 data 参数新建新建一个 vue 对象
const v = new Vue({
    data: {
        a:1,
        b:2,
    }
});
// watch data 里面某个 a 节点的变动了，如果变动，则执行 cb
v.$watch('a',function(){
    console.info('the value of a has been changed !');
});

//  watch data 里面某个 b 节点的变动了，如果变动，则执行 cb
v.$watch('b',function(){
    console.info('the value of b has been changed !');
})

所以我们自然而然的想到，对某个 key 的 $watch 方法应该是新建了一个 watcher 的实例的. 并且，vue 也是这样实现的. 简要的 Vue 类的实现如下 (只贴出相关代码)

Vue.js

// 引入将上面中实现的 Observer
import { Observer } from './Observer.js';
import { Watcher } from './Watcher.js';

export default class Vue {
  constructor(options) {
    // 在 this 上挂载一个公有变量 $options ,用来暂存所有参数
    this.$options = options
    // 声明一个私有变量 _data ,用来暂存 data
    let data = this._data = this.$options.data
    // 在 this 上挂载所有 data 里的 key 值， 这些 key 值对应的 get/set 都被代理到 this._data 上对应的同名 key 值
    Object.keys(data).forEach(key => this._proxy(key));
    // 将 this._data 进行 reactive 化
    new Observer(data, this)
  }
  // 对外暴露 $watch 的公有方法，可以对某个 this._data 里的 key 值创建一个 watcher 实例
  $watch(expOrFn, cb) {
    // 注意，每一个 watcher 的实例化都依赖于 Vue 的实例化对象, 即 this
    new Watcher(this, expOrFn, cb)
  }
  //  将 this.keyName 的某个 key 值的 get/set 代理到  this._data.keyName 的具体实现
  _proxy(key) {
    var self = this
    Object.defineProperty(self, key, {
      configurable: true,
      enumerable: true,
      get: function proxyGetter() {
        return self._data[key]
      },
      set: function proxySetter(val) {
        self._data[key] = val
      }
    })
  }
}

Watch.js

// 引入Dep.js, 是什么我们待会再说
import { Dep } from './Dep.js';

export class Watcher {
  constructor(vm, expOrFn, cb) {
    this.cb = cb;
    this.vm = vm;
    this.expOrFn = expOrFn;
    // 初始化 watcher 时, vm._data[this.expOrFn] 对应的 val
    this.value = this.get();
  }
  // 用于获取当前 vm._data 对应的 key = expOrFn 对应的 val 值
  get() {
    Dep.target = this;
    const value = this.vm._data[this.expOrFn];
    Dep.target = null;
    return value;
  }
  // 每次 vm._data 里对应的 expOrFn, 即 key 的 setter 被触发，都会调用 watcher 里对应的 update方法
  update() {
    this.run();
  }
  run() {
    // 这个 value 是 key 被 setter 调用之后的 newVal, 然后比较 this.value 和 newVal, 如果不相等，则替换 this.value 为 newVal, 并执行传入的cb.
    const value = this.get();
    if (value !== this.value) {
      this.value = value;
      this.cb.call(this.vm);
    }
  }
}

对于什么是 Dep, 和 Watcher 里的 update() 方法到底是在哪个时候被谁调用的，后面会说

3. 如何收集 watcher 的依赖

前面我们讲了 watcher 的大致实现，以及 Vue 代理 data 到 this 上的原理。现在我们就来梳理一下，Observer/Watcher 之间的关系，来说明它们是如何调用的.

首先, 我们要来理解一下 watcher 实例的概念。实际上 Vue 的 v-model, v-bind , {{ mustache }}, computed, watcher 等等本质上是分别对 data 里的某个 key 节点声明了一个 watcher 实例.

<input v-model="abc">
<span>{{ abc }}</span>
<p :data-key="abc"></p>
...

const v = new Vue({
    data:{
        abc: 111,
    }
    computed:{
        cbd:function(){
            return `${this.abc} after computed`;
        }
    watch:{
        abc:function(val){
            console.info(`${val} after watch`)
        }
     }  
    }
})

这里，Vue 一共声明了 4 个 watcher 实例来监听abc, 1个 watcher 实例来监听 cbd. 如果 abc 的值被更改，那么 4 个 abc - watcher 的实例会执行自身对应的特定回调(比如重新渲染dom,或者是打印信息等等)

不过，Vue 是如何知道，某个 key 对应了多少个 watcher, 而 key 对应的 value 发生变化后，又是如何通知到这些 watcher 来执行对应的不同的回调的呢？

实际上更深层次的逻辑是:

在 Observer阶段，会为每个 key 都创建一个 dep 实例。并且，如果该 key 被某个 watcher 实例 get, 把该 watcher 实例加入 dep 实例的队列里。如果该 key 被 set, 则通知该 key 对应的 dep 实例， 然后 dep 实例会将依次通知队列里的 watcher 实例, 让它们去执行自身的回调方法

dep 实例是收集该 key 所有 watcher 实例的地方.

watcher 实例用来监听某个 key ，如果该 key 产生变化，便会执行 watcher 实例自身的回调

相关代码如下:

Dep.js

export class Dep {
  constructor() {
    this.subs = [];
  }
  // 将 watcher 实例置入队列
  addSub(sub) {
    this.subs.push(sub);
  }
  // 通知队列里的所有 watcher 实例，告知该 key 的 对应的 val 被改变
  notify() {
    this.subs.forEach((sub, index, arr) => sub.update());
  }
}

// Dep 类的的某个静态属性，用于指向某个特定的 watcher 实例.
Dep.target = null
observer.js

import {Dep} from './dep'
function makeItReactive(obj, key, val) {
 var dep = new Dep()
Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: () => {
    // 收集依赖！ 如果该 key 被某个 watcher 实例依赖，则将该 watcher 实例置入该 key 对应的 dep 实例里
    if(Dep.target){
      dep.addSub(Dep.target)
    }
    return val
  },
  set: (newVal) => {
    if (newVal === val) {
      return;
    }
    else if (isObject(newVal)) {
      new Observer(newVal);
      val = newVal;
    // 通知 dep 实例, 该 key 被 set，让 dep 实例向所有收集到的该 key 的 watcher 实例发送通知
    dep.notify()
    }
    else if (!isObject(newVal)) {
      val = newVal;
    // 通知 dep 实例, 该 key 被 set，让 dep 实例向所有收集到的该 key 的 watcher 发送通知
    dep.notify()
    }
  }
})
     }    

watcher.js

import { Dep } from './Dep.js';

export class Watcher {
  constructor(vm, expOrFn, cb) {
    this.cb = cb;
    this.vm = vm;
    this.expOrFn = expOrFn;
    this.value = this.get();
  }
  get() {
    // 在实例化某个 watcher 的时候，会将Dep类的静态属性 Dep.target 指向这个 watcher 实例
    Dep.target = this;
    // 在这一步 this.vm._data[this.expOrFn] 调用了 data 里某个 key 的 getter, 然后 getter 判断类的静态属性 Dep.target 不为null, 而为 watcher 的实例， 从而把这个 watcher 实例添加到 这个 key 对应的 dep 实例里。 巧妙！
    const value = this.vm._data[this.expOrFn];
    // 重置类属性 Dep.target 
    Dep.target = null;
    return value;
  }

  // 如果 data 里的某个 key 的 setter 被调用，则 key 会通知到 该 key 对应的 dep 实例, 该Dep实例， 该 dep 实例会调用所有 依赖于该 key 的 watcher 实例的 update 方法。
  update() {
    this.run();
  }
  run() {
    const value = this.get();
    if (value !== this.value) {
    this.value = value;
    // 执行 cb 回调
    this.cb.call(this.vm);
    }
  }
}

总结：

至此， Watcher, Observer , Dep 的关系全都梳理完成。而这些也是 Vue 实现的核心逻辑之一。再来简单总结一下三者的关系，其实是一个简单的 观察-订阅 的设计模式, 简单来说就是， 观察者观察数据状态变化, 一旦数据发生变化，则会通知对应的订阅者，让订阅者执行对应的业务逻辑 。我们熟知的事件机制，就是一种典型的观察-订阅的模式

Observer, 观察者，用来观察数据源变化.
Dep, 观察者和订阅者是典型的 一对多 的关系,所以这里设计了一个依赖中心,来管理某个观察者和所有这个观察者对应的订阅者的关系, 消息调度和依赖管理都靠它。
Watcher, 订阅者，当某个观察者观察到数据发生变化的时候，这个变化经过消息调度中心，最终会传递到所有该观察者对应的订阅者身上，然后这些订阅者分别执行自身的业务回调即可
参考
Vue源码解读-滴滴FED
代码参考