写文章不容易，点个赞呗兄弟
专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧
研究基于 Vue版本 【2.5.17】
如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧
【Vue原理】依赖收集 - 源码版之基本数据类型
如果对依赖收集完全没有概念的同学，可以先看我这篇
【Vue原理】响应式原理 - 白话版
依赖收集，主要是为了解决一个问题，什么问题呢？
首先，我们都知道，Vue 的数据是响应式更新的，一旦数据改变了，那么相应使用到 数据的地方也会跟着改变。
那么问题来了，数据改变的时候，Vue 怎么知道，去让那些使用到数据的地方也改变呢？
这就是依赖收集要解决的问题！
他是怎么解决的？简单说就是把依赖了数据的地方，给集中收集起来以便变化后通知！我们今天来看源码的流程
首先，响应式更新，分为两步，依赖收集和依赖更新
今天讲的是依赖收集，如何去收集 使用了数据的地方
依赖收集，又分为两个流程
1、数据初始化流程
2、依赖收集流程
当前篇，先以基本数据类型为例讲解，因为 基本数据和 引用数据 在处理上有很大的不同，引用类型需要理解的东西更多更复杂，所以需要循序渐进，分两篇描述
数据初始化流程
首先，在实例初始化的时候，需要对数据进行响应式处理，也就是给每个属性都使用 Object.defineProperty 处理
处理的流程是怎么样的呢？
1、实例初始化中，调用 initState 处理部分选项数据，initData 用于处理选项 data
Vue.prototype._init=function(){
...
initState(this)
...
}
function initState(vm) {
var opts = vm.$options;
... props，computed，watch 等选项处理
if (opts.data) {
initData(vm);
}
};2、initData 遍历 data，definedReactive 处理每个属性
function initData(vm) {
var data = vm.$options.data;
data = typeof data === 'function' ?
data.call(vm, vm) : data || {};
// ... 遍历 data 数据对象的key，重名检测，合规检测等代码
new Observer(data);
}
function Observer(value) {
var keys = Object.keys(value);
// ...被省略的代码
for (var i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i]);
}
};3、definedReactive 给对象的属性 通过 Object.defineProperty 设置响应式
function defineReactive(obj, key) {
// dep 用于中收集所有 依赖我的 东西
var dep = new Dep();
var val = obj[key]
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get() { ...依赖收集，详细源码下个流程放出 },
set() { ....依赖更新，源码下篇文章放出 }
});
}
依赖收集流程
写一个小例子来解析
new Vue({
el: document.getElementsByTagName("div")[0],
data(){
return {
name:11
}
}
})页面模板
页面引用了数据 name，name 需要保存 页面的watcher，以便于 name 变化时，通知 页面watcher 更新
1、页面渲染函数
with(this){
return _c('div',{},[name])
}2、读取 name
渲染函数执行，上下文对象绑定为 实例，于是name读取到实例上的 name
3、保存 watcher
name 被读取，自然走到 Object.defineProperty.get 方法上，从这里开始收集 watcher
先来观察下 defineReactive 中省略的 get 的源码
function defineReactive(obj, key) {
var dep = new Dep();
var val = obj[key]
Object.defineProperty(obj, key, {
get() {
if (Dep.target) {
// 收集依赖
dep.addSub(Dep.target)
}
return val
}
});
}哈哈哈，这里就有意思了，这段代码就是 依赖收集的核心，主要是三个点
Dep.target
Dep
dep.addSub
1、Dep.target
Dep.target 指向的是各种 watcher，watch的watcher，页面的watcher 等等
Dep.target 是变化的，根据当前解析流程，不停地指向不同的 watcher （指向，其实就是直接赋值 ，如下）
Dep.target = 具体watcher“当然没有这么简单，就是表示一个意思而已”
简单想，指向哪个watcher，那么就是那个 watcher 正在使用数据，数据就要收集这个watcher
你可以先不用管 Dep.target 到底是怎么指向，你只用记住 在 watcher
比如当前页面开始渲染时，Dep.target 会提前指向当前页面的 watcher。
于是页面渲染函数执行，并引用了数据 name 后，name 直接收集 Dep.target，就会收集到当前页面的 watcher
watcher 有负责实例更新的功能，所以会被收集起来，数据变化时通知 watcher，就可以调用 watcher 去更新了
watcher 在 依赖收集中只起到被收集的作用，所以不会在这里详细解释
2、Dep
Dep 是一个构造函数，用于创建实例，并带有很多方法
实例会包含一个属性 subs 数组，用于存储不同数据 【收集的依赖】
看下dep的构造函数
var Dep = function Dep() {
// 保存watcher 的数组
this.subs = [];
};3、dep.addSub
原型上的方法，作用是往 dep.subs 存储器中 中直接添加 watcher
Dep.prototype.addSub = function(sub) {
this.subs.push(sub);
};所以，【dep.addSub(Dep.target) 】就会直接添加当前 watcher
于是，收集流程大概是这样
1、页面的渲染函数执行， name 被读取
2、触发 name的 Object.defineProperty.get 方法
3、于是，页面的 watcher 就会被收集到 name 专属的闭包dep 的 subs 中
总结
为什么需要依赖收集，之前也已经说过，是为了变化时通知 那些使用过数据的地方
就好比，你去商店买东西，东西还没有发售，于是你把你的电话给老板，老板把你的记在电话本上。当东西发售时，就会打你的电话通知你，让你来领取（完成更新）。
其中涉及的几个步骤，按上面的例子来转化一下
1、你买东西，就是你要使用数据 name
2、你把电话给老板，电话就是你的 watcher，用于通知
3、老板记下电话在电话本，就是把 watcher 保存在 subs 中。
4、剩下的步骤属于依赖更新