记录vue2.0我理解的依赖收集过程

468 阅读1分钟

watcher

在src\platforms\web\runtime\index.js中$mount方法的注册中最后用到的mountComponent方法

mountComponent()

在这个方法里我们发现了new Watcher,这里就是wather实例创建的地方,一个watcher对应一个组件/实例

而在water实例创建时传入的第二个参数是updateComponent函数,在里面执行的是vm._update(vm._render(), hydrating)

此图为wather的constructor部分,expOrFn被赋值给了this.getter,在最后执行了this.get(),在其中执行了this.getter,也就是上面提到的updateComponent(),最后要执行的也就是_update函数vm._update(vm._render(), hydrating),从而触发了_render

Dep

_render函数中势必会触发data中属性的get, src\core\observer\index.js中可以找到get触发时会dep.depend(),然后就是Dep.target.addDep(this) 重点是一个dep对应一个key,depwatcher是多对多的关系

补充:在pushTarget()中其实定义了Dep.target,所以data属性不是每次触发get的时候都有Dep.target,也就不会每次都触发dep.depend()

依赖收集完成