深入Vue系列 Vue中的依赖收集

深入Vue系列 Vue中的响应式对象
深入Vue系列 Vue中的依赖收集
深入Vue系列 Vue中的派发更新

简介

通过响应式对象知道,每一个 data 的属相都会实例化一个 Dep,并且它的 get 函数中通过 dep.depend做依赖收集。通过下面这张图比较直观的看出依赖收集的过程:
vue-Dep
defineReactive 的功能就是定义一个响应式对象,给对象动态添加 gettersetter,它的定义在 src/core/observer/index.js,在 getter 中会做依赖收集,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
/**
* Define a reactive property on an Object.
*/
export function defineReactive(
obj: Object,
key: string,
val: any,
customSetter?: ?Function,
shallow?: boolean
) {
/*在闭包中定义一个dep对象*/
const dep = new Dep();

const property = Object.getOwnPropertyDescriptor(obj, key);
if (property && property.configurable === false) {
return;
}
// 如果之前该对象已经预设了getter/setter则将其缓存,新定义的getter/setter中会将其执行
// cater for pre-defined getter/setters
const getter = property && property.get;
const setter = property && property.set;
if ((!getter || setter) && arguments.length === 2) {
val = obj[key];
}
// 子对象递归调用 observe
let childOb = !shallow && observe(val);
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
// 如果原本对象拥有getter方法则执行
const value = getter ? getter.call(obj) : val;
// 如果当前有watcher在读取当前值
if (Dep.target) {
// 那么进行依赖收集,dep.addSub
dep.depend();
if (childOb) {
/*子对象进行依赖收集,其实就是将同一个watcher观察者实例放进了两个depend中,一个是正在本身闭包中的depend,另一个是子元素的depend*/
childOb.dep.depend();
// 这里是对数组进行劫持
if (Array.isArray(value)) {
/*是数组则需要对每一个成员都进行依赖收集,如果数组的成员还是数组,则递归。*/
dependArray(value);
}
}
}
return value;
},
set: function reactiveSetter(newVal) {
// 先getter
const value = getter ? getter.call(obj) : val;
/* eslint-disable no-self-compare */
// 如果跟原来值一样则不管
if (newVal === value || (newVal !== newVal && value !== value)) {
return;
}
/* eslint-enable no-self-compare */
if (process.env.NODE_ENV !== "production" && customSetter) {
customSetter();
}
// 如果原本对象拥有setter方法则执行
if (setter) {
setter.call(obj, newVal);
} else {
val = newVal;
}
/*新的值需要重新进行observe,保证数据响应式*/
childOb = !shallow && observe(newVal);
/*dep对象通知所有的观察者*/
dep.notify();
}
});
}

getter 的时候进行依赖的收集,注意这里,只有在 Dep.target 中有值的时候才会进行依赖收集,这个 Dep.target 是在Watcher实例的 get 方法调用的时候 pushTarget 会把当前取值的watcher推入 Dep.target,原先的watcher压栈到 targetStack 栈中,当前取值的watcher取值结束后出栈并把原先的watcher值赋给 Dep.targetcleanupDeps 最后把新的 newDeps 里已经没有的watcher清空,以防止视图上已经不需要的无用watcher触发setter 的时候首先 getter,并且比对旧值没有变化则return,如果发生变更,则dep通知所有subs中存放的依赖本数据的Watcher实例 update 进行更新,这里 update 中会 queueWatcher( ) 异步推送到调度者观察者队列 queue 中,在nextTickflushSchedulerQueue( ) 把队列中的watcher取出来执行 watcher.run 且执行相关钩子函数。

Dep

Dep 是整个 getter 依赖收集的核心,它的定义在 src/core/observer/dep.js 中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import type Watcher from "./watcher";
import { remove } from "../util/index";
let uid = 0;
/**
* A dep is an observable that can have multiple
* directives subscribing to it.
*/
export default class Dep {
static target: ?Watcher;
id: number;
subs: Array<Watcher>;
constructor() {
this.id = uid++;
// 订阅者的列表
this.subs = [];
}
/*添加一个观察者对象*/
addSub(sub: Watcher) {
this.subs.push(sub);
}
/*移除一个观察者对象*/
removeSub(sub: Watcher) {
remove(this.subs, sub);
}
//给watcher收集依赖
//这里是一个关键步骤,Dep.target是一个watcher实例
//先将这个Dep实例添加到Watcher的依赖中
//然后在watcher中调用dep.addSub将watcher添加到dep的订阅者中
depend() {
if (Dep.target) {
Dep.target.addDep(this);
}
}
/*通知所有订阅者*/
notify() {
// stabilize the subscriber list first
const subs = this.subs.slice();
//遍历这个依赖的所有订阅者watcher
for (let i = 0, l = subs.length; i < l; i++) {
//update()的最终目的就是要执行Watcher的getter
//执行这个Watcher的getter的时候就会触发这个Watcher的依赖们的get()
//然后重新收集依赖
subs[i].update();
}
}
}
// the current target watcher being evaluated.
// this is globally unique because there could be only one
// watcher being evaluated at any time.
Dep.target = null;
// watcher栈
const targetStack = [];
/* 将watcher观察者实例设置给Dep.target,用以依赖收集。同时将该实例存入target栈中 */
export function pushTarget(_target: ?Watcher) {
if (Dep.target) targetStack.push(Dep.target);
// 改变目标指向
Dep.target = _target;
}
/* 将观察者实例从target栈中取出并设置给Dep.target */
export function popTarget() {
Dep.target = targetStack.pop();
}
  • Dep.target 是一个静态属性,这是一个全局唯一 Watcher,这是一个非常巧妙的设计,因为在同一时间只能有一个全局的 Watcher 被计算。
  • 定义一些 Dep 上得方法,添加依赖方法、移除方法、调用 watcher.update()的方法
  • 实例属性 subs 保存 watcher 订阅者的列表

watcher

src/core/observer/watcher.js 代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
    let uid = 0

/**
* A watcher parses an expression, collects dependencies,
* and fires callback when the expression value changes.
* This is used for both the $watch() api and directives.
*/
export default class Watcher {

constructor (
vm: Component,
expOrFn: string | Function,
cb: Function,
options?: ?Object,
isRenderWatcher?: boolean
) {
this.vm = vm
if (isRenderWatcher) {
vm._watcher = this
}
vm._watchers.push(this)
// options
this.cb = cb
this.deps = []
this.newDeps = []
this.depIds = new Set()
this.newDepIds = new Set()
this.expression = process.env.NODE_ENV !== 'production'
? expOrFn.toString()
: ''
// parse expression for getter
if (typeof expOrFn === 'function') {
this.getter = expOrFn
} else {
this.getter = parsePath(expOrFn) // // 在get方法中执行
}
if (this.computed) {
this.value = undefined
this.dep = new Dep()
} else {
this.value = this.get() // 调用get方法
}
}

/**
* Evaluate the getter, and re-collect dependencies.
*/
get () {
/*将自身watcher观察者实例设置给Dep.target,用以依赖收集。*/
pushTarget(this)
let value
const vm = this.vm
try {
value = this.getter.call(vm, vm)
} catch (e) {
if (this.user) {
handleError(e, vm, `getter for watcher "${this.expression}"`)
} else {
throw e
}
} finally {
// "touch" every property so they are all tracked as
// dependencies for deep watching
/*如果存在deep,则触发每个深层对象的依赖,追踪其变化*/
if (this.deep) {
/*递归每一个对象或者数组,触发它们的getter,使得对象或数组的每一个成员都被依赖收集,形成一个“深(deep)”依赖关系*/
traverse(value)
}
/*将观察者实例从target栈中取出并设置给Dep.target*/
popTarget()
this.cleanupDeps()
}
return value
}

/**
* Add a dependency to this directive.
*/
addDep (dep: Dep) {... }/* 添加一个依赖关系到Deps集合中 */

/**
* Clean up for dependency collection.
*/
cleanupDeps () { ...}/* 清理newDeps里没有的无用watcher依赖 */
// ...
}

Watcher是一个观察者对象。依赖收集以后Watcher对象会被保存在Depsubs中,数据变动的时候Dep会通知Watcher实例,然后由Watcher实例回调cb进行视图的更新。

触发流程

大致流程如下:

  1. Vue 的 mount 过程是通过 mountComponent 函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 初始化渲染 watcher
new Watcher(
vm,
updateComponent,
noop,
{
before() {
if (vm._isMounted) {
callHook(vm, "beforeUpdate");
}
}
},
true /* isRenderWatcher */
);
  1. 初始化渲染watcher的时候,会执行watcher的构造函数,再会执行this.get()方法,进入 get 函数,首先执行:
1
2
3
4
5
6
7
8
pushTarget(this);
// pushTarget方法实现
export function pushTarget(_target: Watcher) {
// 如果存在Dep.target 就把 Dep.target 压入targetStack 栈,为了后面恢复使用
if (Dep.target) targetStack.push(Dep.target);
// 把 Dep.target 赋值为当前的渲染 watcher
Dep.target = _target;
}

实际上就是把 Dep.target 赋值为当前的渲染 watcher 并压栈(为了恢复用)。

  1. 接着会执行:
1
2
3
4
5
6
7
8
// this.getter 对应就是 updateComponent 函数
value = this.getter.call(vm, vm);
// 所以就会执行
updateComponent = () => {
// 其实执行的就是个
vm._update(vm._render(), hydrating);
};
// vm._update(vm._render(), hydrating)
  1. 执行vm._render() 这个方法会生成 渲染 VNode,并且在这个过程中会对 vm 上的数据访问,这个时候就触发了数据对象的 getter。每个对象属性的getter都持有一个Dep实例,在触发 getter 的时候就会调用dep.depend()方法,也就会执行Dep.target.addDep(this)

  2. 执行Dep.target.addDep(this) 这个时候Dep.target已经被赋值为渲染watcher,因为在上面执行了pushTarget(this)。执行 addDep 方法代码如下:

1
2
3
4
5
6
7
8
9
10
addDep (dep: Dep) {
const id = dep.id
if (!this.newDepIds.has(id)) {
this.newDepIds.add(id)
this.newDeps.push(dep)
if (!this.depIds.has(id)) {
dep.addSub(this)
}
}
}

这时候会做一些逻辑判断(保证同一数据不会被添加多次)后执行 dep.addSub(this),那么就会执行 this.subs.push(sub),也就是说把当前的 watcher 订阅到这个数据持有的 depsubs 中,这个目的是为后续数据变化时候能通知到哪些 subs 做准备。

  1. 接着执行 watcherget()方法中的 traverse(value)popTarget()
1
2
3
4
5
6
7
8
9
10
11
12
13
if (this.deep) {
/*递归每一个对象或者数组,触发它们的getter,使得对象或数组的每一个成员都被依赖收集,形成一个“深(deep)”依赖关系*/
traverse(value);
}
/*将观察者实例从target栈中取出并设置给Dep.target*/
popTarget();

// popTarget 实现 在Dep类中
// src/core/observer/dep.js
/* 将观察者实例从target栈中取出并设置给Dep.target */
export function popTarget() {
Dep.target = targetStack.pop();
}

执行traverse(value)递归触发子项的getter完成依赖收集。再执行popTarget()实际上就是把 Dep.target 恢复成上一个状态,因为当前 vm 的数据依赖收集已经完成,那么对应的渲染Dep.target 也需要改变。

  1. 接着执行watcherget()方法中的 this.cleanupDeps(), cleanupDeps()函数定义在watcher类中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// cleanupDeps 函数
cleanupDeps () {
let i = this.deps.length
while (i--) {
const dep = this.deps[i]
if (!this.newDepIds.has(dep.id)) {
dep.removeSub(this)
}
}
let tmp = this.depIds
this.depIds = this.newDepIds
this.newDepIds = tmp
this.newDepIds.clear()
tmp = this.deps
this.deps = this.newDeps
this.newDeps = tmp
this.newDeps.length = 0
}

首先理解四个变量depIdsnewDepIdsdepsnewDeps

  • depIds Hash表,用于快速查找(dep
  • newDepIds Hash表,用于快速查找(newDeps
  • deps 缓存上一轮执行观察者函数用到的dep实例
  • newDeps 存储本轮执行观察者函数用到的dep实例

在执行 cleanupDeps 函数的时候,会首先遍历 deps,移除对 dep.subs 数组中 Wathcer 的订阅,然后把 newDepIdsdepIds 交换,newDepsdeps 交换,并把 newDepIdsnewDeps 清空。

为什么清除 Deps
因此Vue设计了在每次添加完新的订阅,会移除掉旧的订阅,这样就保证了在我们刚才的场景中,如果渲染 b 模板的时候去修改 a 模板的数据,a 数据订阅回调已经被移除了,所以不会有任何浪费。

总结

其实在 Vue 中初始化渲染时,视图上绑定的数据就会实例化一个 Watcher依赖收集就是是通过属性的 getter 函数完成的,ObserverWatcherDep 都与依赖收集相关。其中 ObserverDep一对一的关系, DepWatcher多对多的关系,Dep 则是 ObserverWatcher 之间的纽带

参考

依赖收集
深入理解 Vue 响应式原理
Vue2.0 源码阅读:响应式原理> Vue 源码阅读-依赖收集原理