响应式依赖收集原理
在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这个数据知道，我有两个地方依赖(绑定)了我，我需要通知他们。
在这里,我们定义的
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对象
我修改了原来的图片，再来看看，是不是清晰多了。
