❗️ 注意：离本文创建时间已经过去了
本文由来
研究了下 Vue 的响应式原理, 想记录下来, 顺便将 Vue 的响应式给实现一遍, 因此有了本文.
概述
Vue 响应式数据的初始化, 是在 initState 的 initData 中进行的, 通过 observe 函数观察 vm 对象的 data 属性, 然后设置 getter 和 setter属性;
因此起码需要三个函数: 设置属性 getter 和 setter 的观察者, 触发 getter 和 setter 的 监听者, 以及保存属性依赖的 收集框, 我分别命名为: observe, watcher, 和 dep
流程
首先是在 observe 中, 将 data 中的属性, 递归的加上 getter 和 setter; 之后, 在 watcher 其中的一个属性的时候, watcher 实例触发 getter 拦截器, 然后该属性的拦截器将 watcher 实例添加到该属性的闭包依赖收集器 dep 中, 同时将该闭包依赖收集器, 放入该 watcher 中;
之后, 当修改上述的属性的时候, 触发 observe 中定义的 setter 拦截器, 此时 dep 中的 watcher 将开始工作, 执行该 watcher 的回调;
注意事项
如何保证触发 getter 的时候, 依赖不重复收集?
watcher 触发 getter 的时候, 会把当前属性的依赖收集器添加到 watcher 的 Set 数组中, 进行对比, 如果重复则不再添加:
1
2
3
4
5
6
7
addDep (dep) {
var id = dep.id;
if (!this.depIds.has(id)) { // 一次求值时候的去重
this.deps.push(dep);
dep.addSubs(this); // 再将 watcher 放到字段的 Dep 的实例 subs 中, 以供值变化的时候 执行 notity, 把 subs 中的 watcher 拉出来挨个执行一遍
}
}
如何在触发 setter 的时候执行回调?
触发 setter 的时候, 会将该属性的中装有 watcher 的数组拉出来挨个执行一遍:
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
// setter
set (newVal) {
// 先触发一次依赖, 在 watcher 中 维护一个 depId 去重
if (newVal === val) {
console.log('值相等, 未变化, 呵呵');
return;
}
val = newVal;
dep.notity(); // 触发 值 watcher 的 update 操作
}
// dep.notity() 函数:
notity () {
this.subs.forEach((watcher) => {
watcher.update();
});
},
// watcher.update() 函数:
update () { // 触发值变化的时候, 执行该函数进行求值及更新操作
var value = this.get();
if (value !== this.value) {
console.log(`恭喜你成功更新了该值, 当前 deps 为: ${this.deps}, depsId 为: ${this.depIds}, 旧值为: ${this.value}, 新值为: ${value}`);
this.cb.call(this.data, this.key);
} else {
console.log('两次相同, 无需更改');
}
}
具体代码:
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
var wId = 0; // watcher 自增 id
var dId = 0; // dep 自增 id
/**
@for 为了观察 data 上的属性变化
*/
function observe (data) {
var propertys = Object.keys(data);
var dep = new Dep(); // 闭包 Dep 外界不可访问, 实例的 subs 放着它的 watcher
propertys.forEach((property) => {
var val = data[property];
Object.defineProperty(data, property, {
get () {
// 添加依赖到 该属性的 闭包 dep 中
dep.depend();
return val;
},
set (newVal) {
// 先触发一次依赖, 在 watcher 中 维护一个 depId 去重
if (newVal === val) {
console.log('值相等, 未变化, 呵呵');
return;
}
val = newVal;
dep.notity(); // 触发 值 watcher 的 update 操作
}
});
});
}
/**
@for 收集 data 的 key 字段变化时候的响应, 并执行
*/
function Watcher (data, key, cb) {
this.data = data;
this.key = key;
this.cb =cb;
this.depIds = new Set();
this.deps = [];
this.value = this.get(); // 触发取值操作
}
Watcher.prototype = {
update () { // 触发值变化的时候, 执行该函数进行求值及更新操作
var value = this.get();
if (value !== this.value) {
console.log(`恭喜你成功更新了该值, 当前 deps 为: ${this.deps}, depsId 为: ${this.depIds}, 旧值为: ${this.value}, 新值为: ${value}`);
this.cb.call(this.data, this.key);
} else {
console.log('两次相同, 无需更改');
}
},
get () {
var val;
pushTarget(this); // 为了方便, 设置 Dep.target 为当前 watcher 实例, 用完即删
val = this.data[this.key]; // 触发取值操作: 触发 observe 中的 getter => 触发 key 字段的 dep.depend() => 触发 watcher 的 addDep =>
popTarget(); // 用完弹出 后进先出
return val;
},
addDep (dep) {
var id = dep.id;
if (!this.depIds.has(id)) { // 一次求值时候的去重
this.deps.push(dep);
dep.addSubs(this); // 再将 watcher 放到字段的 Dep 的实例 subs 中, 以供值变化的时候 执行 notity, 把 subs 中的 watcher 拉出来挨个执行一遍
}
}
}
/**
@for 收集 data 的 key 字段变化时候的响应, 并执行
*/
function Dep () {
this.subs = [];
this.id = wId++;
}
Dep.prototype = {
depend () {
Dep.target.addDep(this); // 触发 get 取值的时候, 将当前 dep 实例添加到 watcher 中
},
notity () {
this.subs.forEach((watcher) => {
watcher.update();
});
},
addSubs (watcher) {
this.subs.push(watcher);
}
};
var targetList = [];
function pushTarget (watcher) {
Dep.target = watcher;
targetList.push(watcher);
}
function popTarget () {
targetList.pop();
Dep.target = targetList[targetList.length - 1];
}
// 执行 watcher
var a = {
b: 'c'
};
observe(a);
// 这个 watcher 是用户自己写的 watch
new Watcher(a, 'b', function (data, key) {
console.log('watcher 回调成功执行!');
});
代码执行顺序示意图:
- EOF -
本文最先发布在: Vue 响应式原理及实现 - Xheldon Blog
博主说：
我常常希望在面对人生中一些关键抉择的时候，有人可以告诉我最佳的做法，让我不至于白白浪费宝贵的时间。推己及人，我因此经常写博客，以期在浩渺无垠的互联网中的这个小小角落里记录下对于我来说只有一次的人生经历，希望能够帮到那些希望得到帮助的人。
