网上貌似没有比较简单的解析,虽然原理并不难,但是跟着源码绕圈子的话多半得想一会还有可能绕晕,我在这里写一个简单版方便各位理解思路
let Listener: (() => void) | null
function Reactive<T>(value: T) {
const subscribeList: Array<() => void> = []
return (val?: T) => {
if (val) {
value = val
subscribeList.forEach(f => f())
}
else {
if (Listener) subscribeList.push(Listener!)
return value
}
}
}
function S(fun: () => void) {
Listener = fun
fun()
Listener = null
}
进行测试
const a = Reactive(1)
const b = Reactive("")
S(() => console.log(`log if a or b changed,now a=${a()} b=${b()}`))
setTimeout(() => { a(20) }, 1000)
setTimeout(() => { b("test") }, 2000)
控制台依次显示
log if a or b changed,now a=1 b=
log if a or b changed,now a=20 b=
log if a or b changed,now a=20 b=test
符合预期