-
Notifications
You must be signed in to change notification settings - Fork 0
/
reactive.html
104 lines (95 loc) · 2.45 KB
/
reactive.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
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
<script>
let activeEffect = null
class Dep {
subscribers = new Set()
track() {
if(!this.subscribers.has(activeEffect) && activeEffect) {
this.subscribers.add(activeEffect)
activeEffect.deps.push(this.subscribers)
}
}
trigger() {
const runEffect = []
this.subscribers.forEach(eff => {
runEffect.push(eff)
})
runEffect.forEach(eff => {
activeEffect = eff
eff()
activeEffect = null
})
}
}
//Vue2
//缺点: no way to detect new property additions in Object, 初始化递归遍历时的性能负担
function reactiveV2(raw) {
Object.keys(raw).forEach(key => {
const dep = new Dep()
let value = raw[key]
Object.defineProperty(raw, key, {
get() {
dep.track()
return value
},
set(newVal) {
value = newVal
dep.trigger()
}
})
})
return raw
}
const targetMap = new WeakMap()
const reactiveV3Handlers = {
get(target, key, receiver) {
const dep = getDep(target, key)
dep.track()
return Reflect.get(target, key, receiver)
},
set(target, key, value, receiver) {
const dep = getDep(target, key)
const result = Reflect.set(target, key, value, receiver)
dep.trigger()
return result
}
}
function getDep(target, key) {
let depsMap = targetMap.get(target)
if(!depsMap) {
depsMap = new Map()
targetMap.set(target, depsMap)
}
let dep = depsMap.get(key)
if(!dep) {
dep = new Dep()
depsMap.set(key, dep)
}
return dep
}