当前位置：网站首页>track和trigger

track和trigger

2022-04-21 20:37:00 【hamimelon2020】 

<!DOCTYPE html>
<html>
    <head>
        <title>document.write() Example</title>
    </head>
    <body>
        <script type="text/javascript">       
const data = {
    ok:true, text:'hello world'}
const bucket = new WeakMap()

let activeEffect
function effect(fn) {
    
    const effectFn = () => {
    
        activeEffect = effectFn
        fn()
    }
    effectFn.deps = []
    effectFn()
}

const obj = new Proxy(data, {
    
    get(target, key) {
    
        // 收集副作用函数
        track(target, key);
        console.log(target[key])
        return target[key]
    },
    set(target, key, newVal) {
    
        target[key] = newVal;
        // 取出副作用并执行
        trigger(target, key);
    }
})

// 封装track函数，追踪变化
function track(target, key) {
    
    if (!activeEffect) return
    let depsMap = bucket.get(target)
    //console.log(depsMap)
    console.log(bucket)
    if (!depsMap) {
    
        bucket.set(target, (depsMap = new Map()))
    }
    let deps = depsMap.get(key)
    if (!deps) {
    
        depsMap.set(key, (deps = new Set()))
    }
    deps.add(activeEffect)
    activeEffect.deps.push(deps)
}

// 封装trigger函数，触发副总用函数重新执行
function trigger(target, key) {
     
    const depsMap = bucket.get(target)
    if (!depsMap) return
    const effects = depsMap.get(key)
    console.log(effects)
    effects && effects.forEach(fn => fn())
}

effect(function effectFn(){
    
   // console.log('effectFn');
    document.body.innerText = obj.ok ? obj.text : 'not'
})


setTimeout(() => {
    
    obj.ok = false // 打印 effectFn
},2000)

console.log(effects)



             </script> 
    </body>

</html>

版权声明
本文为[hamimelon2020]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_40945354/article/details/124317991

边栏推荐

猜你喜欢

随机推荐