简单实现响应式系统中,代码我们简单的把函数名设置成了effect,若是函数名不叫effect,代码就出现了问题。因此我们需要提供一个注册副作用函数的机制。
let activeEffect
function effect(fn){
activeEffect = fn
fn()
}
const bucket = new WeakMap()
const data = { text: 'hello world'}
const obj = new Proxy(data,{
get(target,key){
track(target,key)
return target[key]
},
set(target,key,newValue){
console.log('bucket:',bucket)
target[key] = newValue
trigger(target,key)
return true
}
})
function track(target,key){
if(!activeEffect) return target[key]
let depsMap = bucket.get(target)
if(!depsMap){
bucket.set(target,(depsMap = new Map()))
}
let deps = depsMap.get(key)
if(!deps){
depsMap.set(key,(deps = new Set()))
}
deps.add(activeEffect)
}
function trigger(target,key){
const depsMap = bucket.get(target)
if(!depsMap) return true
const effects = depsMap.get(key)
effects && effects.forEach(fn => fn())
}
effect(
()=>{
console.log('effect fn')
document.body.innerText = obj.text
}
)
setTimeout(()=>{
obj.text12 = 'hello vue3'
},1000)