为什么要依赖收集

先看下面这段代码

  1. new Vue({
  2.     template: 
  3.         `<div>
  4.             <span>text1:</span> {{text1}}
  5.             <span>text2:</span> {{text2}}
  6.         <div>`,
  7.     data: {
  8.         text1: 'text1',
  9.         text2: 'text2',
  10.         text3: 'text3'
  11.     }
  12. });

按照之前《响应式原理》中的方法进行绑定则会出现一个问题——text3在实际模板中并没有被用到，然而当text3的数据被修改（this.text3 = ‘test’）的时候，同样会触发text3的setter导致重新执行渲染，这显然不正确。

先说说Dep

当对data上的对象进行修改值的时候会触发它的setter，那么取值的时候自然就会触发getter事件，所以我们只要在最开始进行一次render，那么所有被渲染所依赖的data中的数据就会被getter收集到Dep的subs中去。在对data中的数据进行修改的时候setter只会触发Dep的subs的函数。

定义一个依赖收集类Dep。

  1. class Dep {
  2.     constructor () {
  3.         this.subs = [];
  4.     }
  6.     addSub (sub: Watcher) {
  7.         this.subs.push(sub)
  8.     }
  10.     removeSub (sub: Watcher) {
  11.         remove(this.subs, sub)
  12.     }
  13.     /*Github:https://github.com/answershuto*/
  14.     notify () {
  15.         // stabilize the subscriber list first
  16.         const subs = this.subs.slice()
  17.         for (let i = 0, l = subs.length; i < l; i++) {
  18.             subs[i].update()
  19.         }
  20.     }
  21. }
  22. function remove (arr, item) {
  23.     if (arr.length) {
  24.         const index = arr.indexOf(item)
  25.         if (index > -1) {
  26.             return arr.splice(index, 1)
  27.         }
  28.     }
  29. }

Watcher

订阅者，当依赖收集的时候会addSub到sub中，在修改data中数据的时候会触发dep对象的notify，通知所有Watcher对象去修改对应视图。

  1. class Watcher {
  2.     constructor (vm, expOrFn, cb, options) {
  3.         this.cb = cb;
  4.         this.vm = vm;
  6.         /*在这里将观察者本身赋值给全局的target，只有被target标记过的才会进行依赖收集*/
  7.         Dep.target = this;
  8.         /*Github:https://github.com/answershuto*/
  9.         /*触发渲染操作进行依赖收集*/
  10.         this.cb.call(this.vm);
  11.     }
  13.     update () {
  14.         this.cb.call(this.vm);
  15.     }
  16. }

开始依赖收集

  1. class Vue {
  2.     constructor(options) {
  3.         this._data = options.data;
  4.         observer(this._data, options.render);
  5.         let watcher = new Watcher(this, );
  6.     }
  7. }
  9. function defineReactive (obj, key, val, cb) {
  10.     /*在闭包内存储一个Dep对象*/
  11.     const dep = new Dep();
  13.     Object.defineProperty(obj, key, {
  14.         enumerable: true,
  15.         configurable: true,
  16.         get: ()=>{
  17.             if (Dep.target) {
  18.                 /*Watcher对象存在全局的Dep.target中*/
  19.                 dep.addSub(Dep.target);
  20.             }
  21.         },
  22.         set:newVal=> {
  23.             /*只有之前addSub中的函数才会触发*/
  24.             dep.notify();
  25.         }
  26.     })
  27. }
  29. Dep.target = null;

将观察者Watcher实例赋值给全局的Dep.target，然后触发render操作只有被Dep.target标记过的才会进行依赖收集。有Dep.target的对象会将Watcher的实例push到subs中，在对象被修改触发setter操作的时候dep会调用subs中的Watcher实例的update方法进行渲染。