Vue是如何收集依赖的？

在初始化vue的每个组件时，会对组件的data进行初始化，就会将由普通对象，在这个过程中便会进行依赖收集的相关逻辑，如下所示：

function defieneReactive(obj,key,val) {
	const dep = new Dep();
	...
	Object.defineProperty(obj,key, {
	...
	get: function reactiveGetter () {
		if(Dep.target){
		dep.depend();
		...
		}
		return val
	}
	...
	}) 
}

以上只保留了关键代码，主要就是const dep = new Dep() 实例化一个Dep的实例，然后在get函数中通过dep.depend()进行依赖收集

（1）Dep
Dep是整个依赖收集的核心，其关键代码如下：

class Dep {
	static target;
	subs;
	consructor () {
		...
		this.subs = [];
	}
	addSub (sub) {
		this.subs.push(sub)
	}
	removeSub(sub) {
		remove(this.sub, sub);
	}
	depend () { 
		if(Dep.target) {
			Dep.target.addDep(this);
		}
	}
	notify () {
		const subs = this.subs.slice();
		for(let i = 0; i < subs.length; i++){
			sub[i].update()
		}
	}
}

Dep是一个class，其中有一个关键的静态属性static，它指向了一个全局唯一Watcher，保证了同一时间全局只有一个watcher被计算，另一个属性subs则是一个Watcher的数组，所以Dep实际上就是对Watcher的管理，再看看Watcher的相关代码：

（2）Watcher

class Watcher {
	getter;
	...
	constructor(vm, expression){
		...
		this.getter = expression;
		this.get();
	}
	get () {
		pushTarget(this);
		value = this.getter.call(vm,vm)
		...
		return value
	}
	addDep (dep) {
		...
		dep.addSub(this)
	}
	...
}
function pushTarget (_target) {
	Dep.target = _target
}

Watcher是一个class，它定义了一些方法，其中和依赖收集相关的主要有get、addDep等。

（3）过程
在实例化Vue时，依赖收集的相过程如下：
初始化状态initState，这中间便会通过defineReactive将数据变成响应式对象，其中的getter部分便是用来依赖收集的
初始化最终会走mount过程，其中会实例化Watcher，进入Watcher中，便会执行this.get()方法

updateCpmponent = () => {
	vm._update(vm._render())
}
new Watcher(vm,updateComponent)

get 方法中的pushTarget实际上就是把Dep.target赋值为当前的watcher。

this.getter.call(vm,vm),这里的getter会执行vm._render()方法，在这个过程中会触发数据对象的getter。那么每个对象值的getter都有有一个dep，在触发getter的时候会调用方法dep.depend()方法，也就会执行Dep.target.addDep(this)。刚才Dep.target已经被赋值为watcher，于是便会执行addDep方法，然后走到dep.addSub()方法，便将当前的watcher订阅到这个数据持有的dep.的subs中，这个目的是为了后续数据变化时候能通知到哪些subs做准备。所以在vm._render()过程中，会触发所有数据的getter，这样便已经完成了一个依赖收集的过程。