effect解析
#
# ReactiveEffect
const pausedQueueEffects = new WeakSet();
let activeSub;
let shouldTrack = true;
class ReactiveEffect {
constructor(fn) {
this.fn = fn;
__publicField$3(this, "deps");
__publicField$3(this, "depsTail");
__publicField$3(this, "flags", 1 | 4);
__publicField$3(this, "next");
__publicField$3(this, "cleanup");
__publicField$3(this, "scheduler");
__publicField$3(this, "onStop");
__publicField$3(this, "onTrack");
__publicField$3(this, "onTrigger");
if (activeEffectScope && activeEffectScope.active) {
activeEffectScope.effects.push(this);
}
}
pause() {
this.flags |= 64;
}
resume() {
if (this.flags & 64) {
this.flags &= -65;
if (pausedQueueEffects.has(this)) {
pausedQueueEffects.delete(this);
this.trigger();
}
}
}
notify() {
if (this.flags & 2 && !(this.flags & 32)) {
return;
}
if (!(this.flags & 8)) {
batch(this);
}
}
run() {
if (!(this.flags & 1)) {
return this.fn();
}
this.flags |= 2;
cleanupEffect(this);
prepareDeps(this);
const prevEffect = activeSub;
const prevShouldTrack = shouldTrack;
activeSub = this;
shouldTrack = true;
try {
return this.fn();
} finally {
cleanupDeps(this);
activeSub = prevEffect;
shouldTrack = prevShouldTrack;
this.flags &= -3;
}
}
stop() {
if (this.flags & 1) {
for (let link = this.deps; link; link = link.nextDep) {
removeSub(link);
}
this.deps = this.depsTail = void 0;
cleanupEffect(this);
this.onStop && this.onStop();
this.flags &= -2;
}
}
trigger() {
if (this.flags & 64) {
pausedQueueEffects.add(this);
} else if (this.scheduler) {
this.scheduler();
} else {
this.runIfDirty();
}
}
runIfDirty() {
if (isDirty(this)) {
this.run();
}
}
get dirty() {
return isDirty(this);
}
}
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
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
# effect
function effect(fn, options) {
if (fn.effect instanceof ReactiveEffect) {
fn = fn.effect.fn;
}
const e = new ReactiveEffect(fn);
if (options) {
shared.extend(e, options);
}
try {
e.run();
} catch (err) {
e.stop();
throw err;
}
const runner = e.run.bind(e);
runner.effect = e;
return runner;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
编辑 (opens new window)
上次更新: 2025/08/26, 10:34:53