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

傷城~ 2022-05-20 00:49 241阅读 0赞

## 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 实例自身的回调  
![这里写图片描述][70]

相关代码如下:

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][Vue_-_FED]  
[代码参考][Link 1]

[70]: /images/20220520/d690a062a5fc4dbc87a7eb2ce6f9350e.png
[Vue_-_FED]: https://defed.github.io/Vue-%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/
[Link 1]: https://github.com/georgebbbb/fakeVue