Vue原理学习（三）

响应式依赖收集原理

在Vue原理学习 (二)中，介绍Object.defineProperty中的[[Getter]]时，提到了Vue会在这里产生依赖收集，那么，什么是依赖收集呢？

在我一开始读到依赖收集这个词的时候，有点懵逼，这里我把自己的理解告诉大家：所谓的依赖收集，就是把所有用到(依赖)的数据给收集起来(放到一个数组中)，方便后面数据发生变化的时候，可以通知这些收集起来的对象。
建议大家可以先去了解JS的发布订阅模式。

我们来看下面这个例子🌰：

<p>{{tetx1}}</p>
<p>{{tetx2}}</p>

let vue = new Vue({
  data: {
    text1: '特朗普谈“特金会”：不会对朝鲜进行政权更迭',
    text2: '韩朝边境地产疯狂：严禁开发地块也在大量交易',
    text3: '“五险一金”迎来4个大变化 对你有啥影响?'
  }
})

这里，我们new了一个Vue实例，其中data中有三个文本数据，但是只使用了text1和text2。

此时，我们作如下操作，修改text3的数据：
this.text3 = '不来梅9-3狂胜弱旅 张玉宁首发上演帽子戏法'

熟悉Vue的同学都知道，我们修改了数据，同时对应的，视图也会发生变化。并且在Vue原理学习 (二)中，我们也介绍了Vue更新视图的简单实现，也就是调用cb函数。

但是，目前我们在这里并没有使用到text3，所以我们只需要更新数据，而不需要更新视图，也就是不需要调用cb函数，因为这样可以提高性能。

另外，我们再来看另外一个例子🌰：

// 定义一个全局变量
let globalObj= {
  text1:  'i am global text'
}
// vue1
let vue1 = new Vue({
  template: ''<p>{{text1}}</p>,
  data: globalObj
})
// vue2
let vue2 = new Vue({
  template: ''<p>{{text1}}</p>,
  data: globalObj
})

在这个例子中，我们定义了两个vue实例，并且其中的text1数据都指向了globalObj，当我们作出修改时：globalObj.text1 = 'hello world'，对应的，vue1和vue2的视图也应该发生变化。

而依赖收集做的就是这里的工作，他会让text1这个数据知道，我有两个地方依赖(绑定)了我，我需要通知他们。

QQ20180518-121225@2x.png

在这里,我们定义的globalObj是一个对象,大家可以去手动的尝试下，如果定义的直接是一个数字或字符串，当我们修改的该全局变量的时候，vue实例并不会发生变化。

对于这一现象，我理解的是：globalObj是一个指针，指向实际的数据存储位置，而当我们将globalObj赋给data的时候，实际是将指针路径给了data，所以当我们修改globalObj.text1的时候，globalObj这个实际的对象会发生变化，同样的,因为data也指向这个对象,也会发生变化。所以，当globalObj不是一个对象，是数字或者字符串的时候（比如globalObj='old text'），我们对globalObj='new text'做这样的修改时，只不过是改变了globalObj的指针指向，原来的old text这个数据依旧存。当然，垃圾回收机制暂不讨论。

对于这一点，大家可以去深入了解JS的变量赋值底层的相关知识。

好，我们言归正传，继续回到Vue的依赖收集上。

依赖收集是如何实现的

这里我们可以简单的先理解JS中的发布订阅模式，依赖收集原理和发布订阅差不多。

我们来看下面的代码，其作用是用来存放Watcher观察者对象。

class Dep {
  constructor () {
    this.subs  =[]; // 用来存放Watcher对象
  }
  // 添加watcher对象方法
  addSubs (sub) {
    this.subs.push(sub)
  }
  // 通知视图更新方法
  notify () {
    this.subs.forEach(sub => {
      sub.update();
    })
  }
}

上段代码是一个简单的发布订阅模式，也是一个简单的订阅者Dep。

同样的，我们还需要写一个Watcher观察者

class Watcher {
  constructor() {
    // 在new一个Watcher的时候，将this赋给Dep.target,在get中会用到
    Dep.target = this
  }
  // 视图更新函数，即前面的`sub.update()`所调用的函数
  update() {
    console.log('视图更新啦😄')
  }
}
Dep.target = null;

依赖收集

我们来修改Vue原理学习 (二)中的defineDispose函数，来完成依赖收集。我们先来看代码。

function defineDispose(obj, key, val) {
const dep = new Dep();
 Object.defineProperty(obj, val, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
        // 将当前的Watcher对象存入subs中
      dep.addSubs(Dep.target)
      return  val;
    },
    set: function reactiveSetter(newVal) {
        if (newVal === val) return 
        dep.notify(); // 通知所有视图 数据发生了更新
    }
  })
}
class Vue {
  constructor(options) {
    this._data = options.data;
    observer(this._data); // 该函数可查看 Vue原理学习 (二) 文章
    // 新建一个Watcher 对象，此时Dep.target会指向这个Watcher对象
    new Watcher();
    // 打印test数据，会触发Getter操作
    console.log('render~', this._data.test);
  }
}

这里，我们对defineDispose稍微做了修改，在开始的地方，定一个一个dep常量，也就是new 了一个Dep实例，并且在get的时候，将Dep.target添加到了subs中，也就是所谓的依赖收集的收集操作。

然后在set的时候，我们调用了notify方法，通知所有收集的Watcher进行视图更新或其他操作。

另外，我们也对Vue构造类做了改变, 增加了new Watcher();，之所以这么做，是因为我们new了一个Watcher对象后，前面get的时候的Dep.target就会指向这个Watcher对象。 可以回头看下前面定义的Watcher类和Dep类。

总结

其实熟悉JS的发布订阅模式的话，会发现，这里的所谓依赖收集其实就是该模式实现的。

首先在observer的过程中会注册get方法，该方法中调用了dep.addSubs()方法来将当前的Watcher对象实例存放进去，然后在数据发生变化的时候，也就是set的时候，会调用dep.notify()方法，来通知他内部所有的Watcher对象进行视图更新操作。

另外，依赖收集的前提条件有两个：

• 触发get方法
• 新建一个Watcher对象

我修改了原来的图片，再来看看，是不是清晰多了。

QQ20180518-173609@2x.png