Vue2源码-响应式原理

响应式原理概述

大致流程，首先实例化Vue,调用_init方法，初始化data、methods、watch、props、生命周期等，通过调用观察者函数observer生成被代理的对象，对象上会有个__ob__属性就是observer的实例，也就是表示该对象被代理了，被代理对象中每个属性通过defineReactive$$1方法来代理(如果属性值是对象或数组就递归向下执行)，对象代理功能是使用Object.defineProperty这个原生api来实现的。Object.defineProperty分别定义get和set方法，get方法当对象属性被引用时触发依赖收集，set方法用来修改属性并执行更新方法。在$mount方法中，会解析模板，引用对象属性触发依赖收集生成vNode，再渲染真实视图。后面在属性更新时，会触发set方法，进行更新。

从源码角度分析

初始化实例

_init

  function Vue (options) {
    if (!(this instanceof Vue)
    ) {
      warn('Vue is a constructor and should be called with the `new` keyword');
    }
    this._init(options);
  }

_init初始化Vue实例，_init定义在原型链上,查看Vue.prototype._init中的内容，其中initLifecycle，确定组件的层级，父组件，根组件，定义属性来保存子组件、wather对象、记录生命周期执行状态属性等；initEvents做一些承父级相关监听函数的操作；initRender，初始化一些跟虚拟DOM相关属性和方法。

注入

initInjections属性注入，配合文档，这里和props属性很相似，inject格式应该是字符串数组或者对象，具体在resolveInject函数中，如果是数组，每一项就对应provide中的属性；如果是对象，再对对象的属性值类型做判断，如果是对象，则需要包含一个default属性返回默认属性的值，反之，则该值就对应provide中的属性。同时注入的属性会不断向上查询，直到找到包含该属性的provide或者到根组件没找到为止。最后生成的对象会注入到当前Vue实例中，注入过程中会使用修改toggleObserving修改shouldObserve状态为false，注入的对象不会递归向下做代理。
initState初始化data、props、methods、computed、watch等属性。这里也是Vue实现响应式原理地方，先放一下，先介绍注入。
initProvide为前面的initInjections注入方法提供provide。

这里查看这几个函数的执行顺序

initInjections => initState => initProvide

首先initState放在initInjections后面，这个就是防止data中的属性被覆盖，而initProvide放在最后执行，因为它是提供数据的，最外层不需要注入操作。而后面的子孙组件中的inject通过向上查找祖先组件的方式，可以访问到最外层Provide。

响应式实现

再回头看initState方法，这其中最重要的就是对data做对象代理。
执行observe方法，observer作为构造函数，data作为参数，生成一个observer对象，value属性来保存data，被代理对象使用__ob__属性来保存这个observer实例，dep属性生成对该对象的订阅者，然后调用原型上的方法walk，依次使用defineReactive$$1对data对象中的每个属性做代理操作。

defineReactive$$1

defineReactive$$1首先生成一个Dep订阅者，然后判断属性是否可配置，再判断属性值如果是对象或数组会进一步向下构造观察者对象，接下来就是Object.defineProperty方法，这也是让Vue能实现响应式原理的API，Object.defineProperty原意是用来定义属性修饰符，包含属性的可修改性、可配置性、可枚举性，同时也可以定义get和set方法，分别在属性读取和修改时执行，这样利用这两个方法进行一些扩展，get方法在执行时在获取属性值的基础上再进行依赖收集，set方法则通知依赖该属性对应的dep的所有watcher观察者来更新视图。

简单介绍完defineReactive$$1，再仔细看下这个函数中两个关键的东西：Dep、Watcher

Dep

订阅者构造函数，每个属性会新建一个dep订阅者，dep中有个subs属性，其中Dep.target一个全局的变量会指向当前watcher观察者，然后当某个视图中对这个属性被引用，就会向该属性的dep订阅者中的subs添加当前的watcher观察者对象。当属性更新时，会调用对应dep中的notify方法，通知subs中所有的watcher执行update更新视图。

Watcher

观察者构造函数，上面已介绍部分，每个Vue实例中会存在_watcher属性对应一个watcher观察者，下面的依赖收集过程会详细介绍Watcher。
这时候应该来一张图描述：对象代理，Dep，Watcher，依赖收集，虚拟DOM，渲染视图等。

依赖收集

接下来介绍依赖收集是什么时候发生的，回顾前面在注入、初始化数据等结束后，先执行created回调函数，然后执行$mount进行组件挂载，这里有意思的是作者定义了两次Vue.prototype.$mount，开始我也觉得奇怪，当然后面定义的会覆盖前面，只是用了一行代码var mount = Vue.prototype.$mount;在覆盖前把第一次的方法保存下来了，这时再看新的$mount方法，主要是在解析编译模板等操作，最后生成一个render 的函数，末尾再执行前面的保存的老的$mount方法，里面使用了mountComponent，可以看到开始前会做一些检验判断render是否存在，没有的话就赋值成一个默认方法（创建一个仅包含文本的虚拟DOM），并抛出警告。然后执行beforeMount生命周期函数，然后会先定义一个updateComponent方法，该方法的作用就是根据对象属性的引用触发依赖收集并生成vNode。

在看后面先new一个Watcher对象，updateComponent方法会作为第二个参数传递进去。接下来查看Watcher是如何定义的。

var Watcher = function Watcher (
    vm,
    expOrFn,
    cb,
    options,
    isRenderWatcher
  ) {
    this.vm = vm;
    if (isRenderWatcher) {
      vm._watcher = this;
    }
    vm._watchers.push(this);
    // options
    if (options) {
      this.deep = !!options.deep;
      this.user = !!options.user;
      this.lazy = !!options.lazy;
      this.sync = !!options.sync;
      this.before = options.before;
    } else {
      this.deep = this.user = this.lazy = this.sync = false;
    }
    this.cb = cb;
    this.id = ++uid$2; // uid for batching
    this.active = true;
    this.dirty = this.lazy; // for lazy watchers
    this.deps = [];
    this.newDeps = [];
    this.depIds = new _Set();
    this.newDepIds = new _Set();
    this.expression = expOrFn.toString();
    // parse expression for getter
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn;
    } else {
      this.getter = parsePath(expOrFn);
      if (!this.getter) {
        this.getter = noop;
        warn(
          "Failed watching path: \"" + expOrFn + "\" " +
          'Watcher only accepts simple dot-delimited paths. ' +
          'For full control, use a function instead.',
          vm
        );
      }
    }
    this.value = this.lazy
      ? undefined
      : this.get();
  };
  Watcher.prototype.get = function get () {
    pushTarget(this);
    var value;
    var vm = this.vm;
    try {
      value = this.getter.call(vm, vm);
    } catch (e) {
      if (this.user) {
        handleError(e, vm, ("getter for watcher \"" + (this.expression) + "\""));
      } else {
        throw e
      }
    } finally {
      // "touch" every property so they are all tracked as
      // dependencies for deep watching
      if (this.deep) {
        traverse(value);
      }
      popTarget();
      this.cleanupDeps();
    }
    return value
  };   

初始化一系列属性和方法，当构造一个watcher对象时，会调用原型上的get方法，该方法首先调用pushTarget会将Dep.target变成当前的wathcer，之后调用对象中的getter方法，此时的getter就是对应前面updateComponent方法，updateComponent真正被执行，从而会调用Vue实例上的_render方法。

Vue.prototype._render = function () {
    var vm = this;
    var ref = vm.$options;
    var render = ref.render;
    var _parentvNode = ref._parentvNode;
    // ......省略分割......
    var vNode;
    // ......省略分割......
    vNode.parent = _parentvNode;
    return vNode

经历一系列地操作，完成了依赖收集和返回对应vNode，即虚拟DOM，vNode有个重要的属性parent父节点，如果为空就表示该节点是根节点，有了虚拟DOM以后，再经历_update、__patch__等主要是diff算法部分，除了第一次vNode还不存在的时候，更新时生成新的vNode后，不会整个拿来更新而是经过diff处理生成最小更新的单位提高性能，updateComponent执行结束前会先调用popTarget方法，让Dep.target回到上一个的值。

    Dep.target = null;
    var targetStack = [];

    function pushTarget (target) {
        targetStack.push(target);
        Dep.target = target;
    }

    function popTarget () {
        targetStack.pop();
        Dep.target = targetStack[targetStack.length - 1];
    }

为什么要用一个数组targetStack来保存watcher，这个跟父子组件挂载更新规则有关，父beforeCreate => 父created => 父beforeMount => 子beforeCreate => 子created => 子beforeMount => 子mounted => 父mounted。这是挂载阶段父子组件生命周期执行顺序。因为子组件依赖收集发生在beforeMount之后mounted之前，因此在父组件如果存在子组件时，子组件构造一个新的watcher对象，此时父组件依赖收集还未结束，pushTarget操作会将父组件的watcherpush进targetStack暂缓起来，子组件生成vNode后，popTarget后Dep.target又恢复成父组件的watcher。

  Watcher.prototype.cleanupDeps = function cleanupDeps () {
    var i = this.deps.length;
    while (i--) {
      var dep = this.deps[i];
      if (!this.newDepIds.has(dep.id)) {
        dep.removeSub(this);
      }
    }
    var tmp = this.depIds;
    this.depIds = this.newDepIds;
    this.newDepIds = tmp;
    this.newDepIds.clear();
    tmp = this.deps;
    this.deps = this.newDeps;
    this.newDeps = tmp;
    this.newDeps.length = 0;
  };

至于cleanupDeps方法，用来更新属性所对应dep订阅者中的watcher对象，该视图中不需要依赖该属性，则从对应的dep中移除watcher，watcher中的newDepIds每次都保存最新的dep的id集合。举个栗子，比如v-if控制的节点组件，showChild值由true变成false时，由于子组件已经不需要渲染了，cleanupDeps执行以后就会取消对childVal的订阅。

<Parent>
    <Child v-if="showChild">{{childVal}}</Child>
</parent>

视图更新

如上，updateComponent执行完成后，视图就完成渲染了。当某个对象代理的数据更新时，set方法执行，dep触发notify方法通知所有watcher观察者执行update，生成新的vNode，重新进行依赖收集等，patch对新老vNode进行diff，更新差异部分的视图。

Vue3都出来了，为什么还在写Vue2的总结？害，我觉得现在不整理出来以后更没机会了🐶 。嘿嘿，有错误的话也大家望指出喽。