第一步
effect.ts
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
| export function effect(fn, options?) {
const _effect = new ReactiveEffect(fn, () => {
_effect.run();
});
_effect.run();
return _effect;
}
class ReactiveEffect {
public active = true;
constructor(public fn, public scheduler) {
}
run() {
if (!this.active) {
return this.fn();
}
return this.fn();
}
}
|
第二步
做依赖收集
第一步中情况，如果像下面这样使用的话，就会出现在非 effect 中使用代理后的对象，也会触发依赖收集
index.html
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="module">
import { reactive, effect } from './reactivity.js';
let obj = { name: 'xiaoming', age: 18, flag: true, address: { name: 1 } };
const state = reactive(obj);
console.log(state);
const _effect = effect(() => {
app.innerHTML = `姓名${state.name}, 年龄:${state.age}`
})
setTimeout(() => {
state.age++
}, 1000)
</script>
</body>
</html>
|
依赖收集是放在属性的访问中做的，即 baseHandler.ts 中的 mutableHandlers
baseHandler.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| import { ReactiveFlags } from './constants';
import { activeEffect } from './effect';
export const mutableHandlers: ProxyHandler<any> = {
get(target, key, receiver) {
if (key === ReactiveFlags.IS_REACTIVE) {
return true;
}
console.log(activeEffect, key);
const res = Reflect.get(target, key, receiver);
return res;
},
set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
return result;
}
};
|
此时按照上面的代码，控制台会输出三次，但正常来说应该只有两个输出才对，因为最后一次在 setTimeout 中访问 age 这部分逻辑并没有在 effect 中，不应该收集
因此，新增 try finally，结束的时候，将当前活动的 effect 置为空，这样就不会触发了
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
| export function effect(fn, options?) {
const _effect = new ReactiveEffect(fn, () => {
_effect.run();
});
_effect.run();
return _effect;
}
export let activeEffect;
class ReactiveEffect {
public active = true;
constructor(public fn, public scheduler) {
}
run() {
if (!this.active) {
return this.fn();
}
try {
activeEffect = this;
return this.fn();
} finally {
activeEffect = undefined;
}
}
}
|
第三步
但是上面的写法，在 activeEffect 位置还有一个问题，如下：
index.html
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="module">
import { reactive, effect } from './reactivity.js';
let obj = { name: 'xiaoming', age: 18, flag: true, address: { name: 1 } };
const state = reactive(obj);
effect(() => {
console.log(state.name);
effect(() => {
console.log(state.name);
});
console.log(state.age);
});
</script>
</body>
</html>
|
当我像上面这样使用的时候，在走最外层的 effect 的时候，activeEffect 的值是 f1，当走到里面的 effect 的时候，activeEffect 变成了 f2，但是，当 f2 执行完毕后，activeEffect 就变成 undefined 了，这样就导致在最后的 age 属性收集不到了
因此新增 lastEffect 属性，用来记录上一次的 effect，代码如下：
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
| export function effect(fn, options?) {
const _effect = new ReactiveEffect(fn, () => {
_effect.run();
});
_effect.run();
return _effect;
}
export let activeEffect;
class ReactiveEffect {
public active = true;
constructor(public fn, public scheduler) {
}
run() {
if (!this.active) {
return this.fn();
}
let lastEffect = activeEffect;
try {
activeEffect = this;
return this.fn();
} finally {
activeEffect = lastEffect;
}
}
}
|
此处稍微有点绕，可以结合以下内容理解：
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="module">
import { reactive, effect } from './reactivity.js';
let obj = { name: 'xiaoming', age: 18, flag: true, address: { name: 1 } };
const state = reactive(obj);
effect(() => {
console.log(state.name);
effect(() => {
console.log(state.name);
});
console.log(state.age);
});
let lastEffect = activeEffect;
let activeEffect = this;
let activeEffect = lastEffect;
</script>
</body>
</html>
|
整理代码
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
| export function effect(fn, options?) {
const _effect = new ReactiveEffect(fn, () => {
_effect.run();
});
_effect.run();
return _effect;
}
export let activeEffect;
class ReactiveEffect {
public active = true;
constructor(public fn, public scheduler) {
}
run() {
if (!this.active) {
return this.fn();
}
let lastEffect = activeEffect;
try {
activeEffect = this;
return this.fn();
} finally {
activeEffect = lastEffect;
}
}
}
|