7.7 data

7.7.1 依赖收集

data在初始化阶段会实例化一个Observer类，这个类的定义如下:(当data类型为数组时，我们暂且跳过，等下一节再分析。)

  1. var Observer = function Observer (value) {
  2.     ···
  3.     // 将__ob__属性设置成不可枚举属性。外部无法通过遍历获取。
  4.     def(value, '__ob__', this);
  5.     // 数组处理
  6.     if (Array.isArray(value)) {
  7.         ···
  8.     } else {
  9.       // 对象处理
  10.       this.walk(value);
  11.     }
  12.   };
  14. function def (obj, key, val, enumerable) {
  15.   Object.defineProperty(obj, key, {
  16.     value: val,
  17.     enumerable: !!enumerable, // 是否可枚举
  18.     writable: true,
  19.     configurable: true
  20.   });
  21. }

Observer会为data添加一个ob属性， ob属性是作为响应式对象的标志，def方法确保了该属性是不可枚举属性，即外界无法通过遍历获取该属性值。除了标志响应式对象外，Observer类还调用了原型上的walk方法，遍历对象上每个属性进行getter,setter的改写。

  1. Observer.prototype.walk = function walk (obj) {
  2.     // 获取对象所有属性，遍历调用defineReactive$$1进行改写
  3.     var keys = Object.keys(obj);
  4.     for (var i = 0; i < keys.length; i++) {
  5.         defineReactive$$1(obj, keys[i]);
  6.     }
  7. };

defineReactive$$1是响应式构建的核心，它会先实例化一个Dep类，即为每个数据都创建一个依赖的管理，之后利用Object.defineProperty重写getter,setter方法。这里我们只分析依赖收集的代码。

  1. function defineReactive$$1 (obj,key,val,customSetter,shallow) {
  2.     // 每个数据实例化一个Dep类，创建一个依赖的管理
  3.     var dep = new Dep();
  5.     var property = Object.getOwnPropertyDescriptor(obj, key);
  6.     // 属性必须满足可配置
  7.     if (property && property.configurable === false) {
  8.       return
  9.     }
  10.     // cater for pre-defined getter/setters
  11.     var getter = property && property.get;
  12.     var setter = property && property.set;
  13.     // 这一部分的逻辑是针对深层次的对象，如果对象的属性是一个对象，则会递归调用实例化Observe类，让其属性值也转换为响应式对象
  14.     var childOb = !shallow && observe(val);
  15.     Object.defineProperty(obj, key, {
  16.       enumerable: true,
  17.       configurable: true,s
  18.       get: function reactiveGetter () {
  19.         var value = getter ? getter.call(obj) : val;
  20.         if (Dep.target) {
  21.           // 为当前watcher添加dep数据
  22.           dep.depend();
  23.           if (childOb) {
  24.             childOb.dep.depend();
  25.             if (Array.isArray(value)) {
  26.               dependArray(value);
  27.             }
  28.           }
  29.         }
  30.         return value
  31.       },
  32.       set: function reactiveSetter (newVal) {}
  33.     });
  34.   }

主要看getter的逻辑，我们知道当data中属性值被访问时，会被getter函数拦截，而数据被访问的典型场景是页面渲染时读取并渲染所需要的数据。在深入剖析Vue源码 - 实例挂载,编译流程的挂载流程中，$mount实例挂载的最后阶段会创建一个渲染watcher,与此同时触发getter进入依赖收集阶段。依赖收集阶段总结来说会做下面几件事：

    • 为当前的watcher(该场景下是渲染watcher)添加拥有的依赖收集器。
    • 为当前的数据收集需要监听的依赖如何理解这两点？代码中会执行dep.depend(),这是Dep这个类定义在原型上的方法。
  1. Dep.prototype.depend = function depend () {
  2.     if (Dep.target) {
  3.       Dep.target.addDep(this);
  4.     }
  5.   };

Dep.target为当前执行的watcher,在渲染阶段，Dep.target为组件挂载时实例化的渲染watcher,因此depend方法又会调用当前watcher的addDep为watcher添加依赖收集器。

  1. Watcher.prototype.addDep = function addDep (dep) {
  2.     var id = dep.id;
  3.     if (!this.newDepIds.has(id)) {
  4.       // newDepIds和newDeps记录watcher拥有的数据
  5.       this.newDepIds.add(id);
  6.       this.newDeps.push(dep);
  7.       // 避免重复添加同一个data收集器
  8.       if (!this.depIds.has(id)) {
  9.         dep.addSub(this);
  10.       }
  11.     }
  12.   };

其中newDepIds是具有唯一成员是Set数据结构，newDeps是数组，他们用来记录当前watcher所拥有的数据，这一过程会进行逻辑判断，避免同一数据添加多次。

  1. Dep.prototype.addSub = function addSub (sub) {
  2.   //将当前watcher添加到数据依赖收集器中
  3.     this.subs.push(sub);
  4. };

addSub为每个数据依赖收集器添加需要被监听的watcher。

  • 遇到属性值为对象时，为该对象的每个值收集依赖
  • 遇到属性值为数组时，进行特殊处理，这点放到后面讲。

7.7.2 派发更新

在分析依赖收集的过程中，可能会有不少困惑，为什么要维护这么多的关系？实际在数据更新时，这些关系会起到什么作用？带着疑惑，我们来看看派发更新的过程。在数据发生改变时，会执行定义好的setter方法，我们先看源码。

  1. Object.defineProperty(obj,key, {
  2.   ···
  3.   set: function reactiveSetter (newVal) {
  4.       var value = getter ? getter.call(obj) : val;
  5.       // 新值和旧值相等时，跳出操作
  6.       if (newVal === value || (newVal !== newVal && value !== value)) {
  7.         return
  8.       }
  9.       ···
  10.       // 新值为对象时，会为新对象进行依赖收集过程
  11.       childOb = !shallow && observe(newVal);
  12.       dep.notify();
  13.     }
  14. })

派发更新阶段会做一下几件事：

    • 数据相等不进行任何派发更新操作
    • 新值为对象时，会对该值的属性进行依赖收集过程
    • 通知该数据收集的watcher依赖,遍历每个watcher进行数据更新这个阶段是调用该数据依赖收集器的dep.notify方法进行更新的派发。
  1. Dep.prototype.notify = function notify () {
  2.     var subs = this.subs.slice();
  3.     if (!config.async) {
  4.       // 根据依赖的id进行排序
  5.       subs.sort(function (a, b) { return a.id - b.id; });
  6.     }
  7.     for (var i = 0, l = subs.length; i < l; i++) {
  8.       // 遍历每个依赖，进行更新数据操作。
  9.       subs[i].update();
  10.     }
  11.   };
    • 更新时会将每个watcher推到队列中，等待下一个tick到来时取出每个watcher进行run操作
  1.  Watcher.prototype.update = function update () {
  2.     ···
  3.     queueWatcher(this);
  4.   };

queueWatcher方法的调用，会将数据所收集的依赖依次推到queue数组中,数组会在下一个事件循环'tick'中根据缓冲结果进行视图更新。而在执行视图更新过程中，难免会因为数据的改变而在渲染模板上添加新的依赖，这样又会执行queueWatcher的过程。所以需要有一个标志位来记录是否处于异步更新过程的队列中。这个标志位为flushing,当处于异步更新过程时，新增的watcher会插入到queue中。

  1. function queueWatcher (watcher) {
  2.     var id = watcher.id;
  3.     // 保证同一个watcher只执行一次
  4.     if (has[id] == null) {
  5.       has[id] = true;
  6.       if (!flushing) {
  7.         queue.push(watcher);
  8.       } else {
  9.         var i = queue.length - 1;
  10.         while (i > index && queue[i].id > watcher.id) {
  11.           i--;
  12.         }
  13.         queue.splice(i + 1, 0, watcher);
  14.       }
  15.       ···
  16.       nextTick(flushSchedulerQueue);
  17.     }
  18.   }

nextTick的原理和实现先不讲，概括来说，nextTick会缓冲多个数据处理过程，等到下一个事件循环tick中再去执行DOM操作，它的原理，本质是利用事件循环的微任务队列实现异步更新。

当下一个tick到来时，会执行flushSchedulerQueue方法，它会拿到收集的queue数组，这是一个watcher的集合，之后对依赖进行排序。为什么进行排序呢？源码中解释了三点：- 4.1. 组件创建是先父后子，所以组件的更新也是先父后子，因此需要保证父的渲染watcher优先于子的渲染watcher更新。- 4.2. 用户定义watcher对数据的监听，这一阶段会创建一个user watcher,user watcher 和渲染watcher执行也有先后，user watcher优先，user watcher放到后面讲。

  1. - 4.3. 如果一个组件在父组件的 ```watcher``` 执行阶段被销毁，那么它对应的 ```watcher``` 执行都可以被跳过，因此这也是保证父要优先子执行的原因。
  1. function flushSchedulerQueue () {
  2.     currentFlushTimestamp = getNow();
  3.     flushing = true;
  4.     var watcher, id;
  5.     // 对queue的watcher进行排序
  6.     queue.sort(function (a, b) { return a.id - b.id; });
  7.     // 循环执行queue.length，为了确保由于渲染时添加新的依赖导致queue的长度不断改变。
  8.     for (index = 0; index < queue.length; index++) {
  9.       watcher = queue[index];
  10.       // 如果watcher定义了before的配置，则优先执行before方法
  11.       if (watcher.before) {
  12.         watcher.before();
  13.       }
  14.       id = watcher.id;
  15.       has[id] = null;
  16.       watcher.run();
  17.       // in dev build, check and stop circular updates.
  18.       if (has[id] != null) {
  19.         circular[id] = (circular[id] || 0) + 1;
  20.         if (circular[id] > MAX_UPDATE_COUNT) {
  21.           warn(
  22.             'You may have an infinite update loop ' + (
  23.               watcher.user
  24.                 ? ("in watcher with expression \"" + (watcher.expression) + "\"")
  25.                 : "in a component render function."
  26.             ),
  27.             watcher.vm
  28.           );
  29.           break
  30.         }
  31.       }
  32.     }
  34.     // keep copies of post queues before resetting state
  35.     var activatedQueue = activatedChildren.slice();
  36.     var updatedQueue = queue.slice();
  37.     // 重置恢复状态，清空队列
  38.     resetSchedulerState();
  40.     // 视图改变后，调用其他钩子
  41.     callActivatedHooks(activatedQueue);
  42.     callUpdatedHooks(updatedQueue);
  44.     // devtool hook
  45.     /* istanbul ignore if */
  46.     if (devtools && config.devtools) {
  47.       devtools.emit('flush');
  48.     }
  49.   }

flushSchedulerQueue阶段，重要的过程可以总结为四点：

    1. queue中的watcher进行排序，原因上面已经总结。
    1. 遍历watcher,如果当前watcher有before配置，则执行before方法，对应分析，在渲染watcher实例化时，我们传递了before函数，即在下个tick更新视图前，会调用beforeUpdate生命周期钩子。
    1. 执行watcher.run进行修改的操作。
    1. 重置恢复状态，这个阶段会将一些流程控制的状态变量恢复为初始值，并清空记录watcher的队列。
  1. new Watcher(vm, updateComponent, noop, {
  2.   before: function before () {
  3.     if (vm._isMounted && !vm._isDestroyed) {
  4.       callHook(vm, 'beforeUpdate');
  5.     }
  6.   }
  7. }, true /* isRenderWatcher */);

重点看看watcher.run()的操作。

  1. Watcher.prototype.run = function run () {
  2.     if (this.active) {
  3.       var value = this.get();
  4.       if ( value !== this.value || isObject(value) || this.deep ) {
  5.         // 设置新值
  6.         var oldValue = this.value;
  7.         this.value = value;
  8.         // 针对user watcher，暂时不分析
  9.         if (this.user) {
  10.           try {
  11.             this.cb.call(this.vm, value, oldValue);
  12.           } catch (e) {
  13.             handleError(e, this.vm, ("callback for watcher \"" + (this.expression) + "\""));
  14.           }
  15.         } else {
  16.           this.cb.call(this.vm, value, oldValue);
  17.         }
  18.       }
  19.     }
  20.   };

首先会执行watcher.prototype.get的方法，得到数据变化后的当前值，之后会对新值做判断，如果满足新旧值不等，新值是对象类型，deep模式的任一条件，则执行cb,cb为实例化watcher时传入的回调。

在分析get方法前，回头看看watcher构造函数的几个属性定义

  1. var watcher = function Watcher(
  2.   vm, // 组件实例
  3.   expOrFn, // 执行函数
  4.   cb, // 回调
  5.   options, // 配置
  6.   isRenderWatcher // 是否为渲染watcher
  7. ) {
  8.   this.vm = vm;
  9.     if (isRenderWatcher) {
  10.       vm._watcher = this;
  11.     }
  12.     vm._watchers.push(this);
  13.     // options
  14.     if (options) {
  15.       this.deep = !!options.deep;
  16.       this.user = !!options.user;
  17.       this.lazy = !!options.lazy;
  18.       this.sync = !!options.sync;
  19.       this.before = options.before;
  20.     } else {
  21.       this.deep = this.user = this.lazy = this.sync = false;
  22.     }
  23.     this.cb = cb;
  24.     this.id = ++uid$2; // uid for batching
  25.     this.active = true;
  26.     this.dirty = this.lazy; // for lazy watchers
  27.     this.deps = [];
  28.     this.newDeps = [];
  29.     this.depIds = new _Set();
  30.     this.newDepIds = new _Set();
  31.     this.expression = expOrFn.toString();
  32.     // parse expression for getter
  33.     if (typeof expOrFn === 'function') {
  34.       this.getter = expOrFn;
  35.     } else {
  36.       this.getter = parsePath(expOrFn);
  37.       if (!this.getter) {
  38.         this.getter = noop;
  39.         warn(
  40.           "Failed watching path: \"" + expOrFn + "\" " +
  41.           'Watcher only accepts simple dot-delimited paths. ' +
  42.           'For full control, use a function instead.',
  43.           vm
  44.         );
  45.       }
  46.     }
  47.     // lazy为计算属性标志，当watcher为计算watcher时，不会理解执行get方法进行求值
  48.     this.value = this.lazy
  49.       ? undefined
  50.       : this.get();
  52. }

方法get的定义如下：

  1. Watcher.prototype.get = function get () {
  2.     pushTarget(this);
  3.     var value;
  4.     var vm = this.vm;
  5.     try {
  6.       value = this.getter.call(vm, vm);
  7.     } catch (e) {
  8.      ···
  9.     } finally {
  10.       ···
  11.       // 把Dep.target恢复到上一个状态，依赖收集过程完成
  12.       popTarget();
  13.       this.cleanupDeps();
  14.     }
  15.     return value
  16.   };

get方法会执行this.getter进行求值，在当前渲染watcher的条件下,getter会执行视图更新的操作。这一阶段会重新渲染页面组件

  1. new Watcher(vm, updateComponent, noop, { before: () => {} }, true);
  3. updateComponent = function () {
  4.   vm._update(vm._render(), hydrating);
  5. };

执行完getter方法后，最后一步会进行依赖的清除，也就是cleanupDeps的过程。

列举一个场景： 我们经常会使用v-if来进行模板的切换，切换过程中会执行不同的模板渲染，如果A模板监听a数据，B模板监听b数据，当渲染模板B时，如果不进行旧依赖的清除，在B模板的场景下，a数据的变化同样会引起依赖的重新渲染更新，这会造成性能的浪费。因此旧依赖的清除在优化阶段是有必要。

  1. // 依赖清除的过程
  2.   Watcher.prototype.cleanupDeps = function cleanupDeps () {
  3.     var i = this.deps.length;
  4.     while (i--) {
  5.       var dep = this.deps[i];
  6.       if (!this.newDepIds.has(dep.id)) {
  7.         dep.removeSub(this);
  8.       }
  9.     }
  10.     var tmp = this.depIds;
  11.     this.depIds = this.newDepIds;
  12.     this.newDepIds = tmp;
  13.     this.newDepIds.clear();
  14.     tmp = this.deps;
  15.     this.deps = this.newDeps;
  16.     this.newDeps = tmp;
  17.     this.newDeps.length = 0;
  18.   };

把上面分析的总结成依赖派发更新的最后两个点

    • 执行run操作会执行getter方法也就是重新计算新值，针对渲染watcher而言，会重新执行updateComponent进行视图更新
    • 重新计算getter后，会进行依赖的清除至此data的依赖收集和派发更新介绍完毕。下一节继续深入computed,watcher的响应式构建过程，敬请期待。。。