vue.js设计与实现-响应系统-watch

watch 的实现原理。它本质上利用了副作用函数重新执行时的可调度性。一个 watch 本身会创建一个 effect，当这个 effect 依赖的响应式数据发生变化时，会执行该 effect 的调度器函数，即 scheduler。这里的 scheduler 可以理解为“回调”，所以我们只需要在 scheduler 中执行用户通过 watch 函数注册的回调函数即可。此外，我们还讲解了立即执行回调的 watch，通过添加新的immediate 选项来实现，还讨论了如何控制回调函数的执行时机，通过 flush 选项来指定回调函数具体的执行时机，本质上是利用了调用器和异步的微任务队列。最后，我们讨论了过期的副作用函数，它会导致竞态问题。为了解决这个问题，Vue.js 为 watch 的回调函数设计了第三个参数，即 onInvalidate。它是一个函数，用来注册过期回调。每当 watch 的回调函数执行之前，会优先执行用户通过onInvalidate 注册的过期回调。这样，用户就有机会在过期回调中将上一次的副作用标记为“过期”，从而解决竞态问题。

const data = {foo:1,bar:1}
    let activeEffect;
    const bucket = new WeakMap()
    const effectStack = []
    function effect(fn,options={}){
        const effectFn = ()=>{
            cleanup(effectFn)
            activeEffect = effectFn
            effectStack.push(effectFn)
            let res = fn()
            effectStack.pop()
            activeEffect = effectStack[effectStack.length-1]
            return res
        }
        effectFn.deps=[]
        effectFn.options = options
        if(!effectFn.options.lazy){
            effectFn()
        }
        return effectFn
    }
    function cleanup(effectFn){
        for(let i=0;i<effectFn.deps.length;i++){
            effectFn.deps[i].delete(effectFn)
        }
        effectFn.deps.length = 0;
    }
    function track(target,key){
        if(!activeEffect) return
        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)
        activeEffect.deps.push(deps)
    }
    function trigger(target,key){
        let depsMap = bucket.get(target)
        if(!depsMap) return
        let effects = depsMap.get(key)
        const effectsToRun = new Set()

        effects && effects.forEach(effectFn=>{
            if(activeEffect!==effectFn){
                effectsToRun.add(effectFn)
            }
        })

        effectsToRun.forEach(effectFn=>{
            if(effectFn.options.scheduler){
                effectFn.options.scheduler()
            }else{
                effectFn()
            }
        })
    }
    const obj = new Proxy(data,{
        get(target,key){
            track(target,key)
            return target[key]
        },
        set(target,key,newVal){
            target[key] = newVal
            trigger(target,key)
        }
    })

    function computed(getter){
        let value
        let dirty = true
        const effectFn = effect(getter,{
            lazy:true,
            scheduler(){
                if(!dirty){
                    dirty = true
                }
                trigger(obj,'value')
            }
        })

        const obj = {
            get value(){
                if(dirty){
                    value = effectFn()
                    dirty = false
                }
                track(obj,'value')
                return value
            }
        }
        return obj
    }


    function watch(source,cb,options={}){
        let getter
        if(typeof source==='function'){
            getter = source
        }else{
            getter = ()=>traverse(source)
        }
        let oldValue,newValue
        // cleanup用来存储用户注册的过期回调
        let cleanup
        function onInvalidate(fn){
            cleanup=fn
        }
        // 提取scheduler调度函数为一个独立的job函数
        const job = ()=>{
            
            newValue = effectFn()
            // 在调用回到函数cb之前，先调用过期回调
            if(cleanup){
                cleanup()
            }
            // 将onInvalidate作为回调函数的第三个参数，以便用户使用
            cb(newValue,oldValue,onInvalidate)
            oldValue = newValue
        }
        const effectFn = effect(
            ()=>getter(),
            {
                lazy:true,
                scheduler:job
            }
        )
        // 手动调用副作用函数，拿到的值就是旧值
        if(options.immediate){
            job()
        }else{
            oldValue = effectFn()
        }
    }


    function traverse(value,seen=new Set()){
        // 如果读取的数据是原始值，或者已经被读取过了，那什么都不做
        if(typeof value!=='object'||value===null||seen.has(value)) return
        seen.add(value)
        for(const k in value){
            traverse(value[k],seen)
        }
        return value
    }
    watch(obj,()=>{
        console.log("数据变了")
    })
    watch(()=>obj.foo,()=>{
        console.log("数据变了foo")
    })
    watch(
        ()=>obj.foo,
        (newValue,oldValue)=>{
            console.log(newValue,oldValue)
        }
    )
    watch(obj,(newValue,oldValue)=>{
        console.log('立即执行',newValue,oldValue)
    },{
        immediate:true
    })
    obj.foo++


    // 过期的副作用，竞态问题
    watch(obj,async(newValue,oldValue,onInvalidate)=>{
        let expired = false
        onInvalidate(()=>{
            expired = true
        })
        // 发送网络请求
        const res = await fetch('...')
        if(!expired){
            finalData = res
        }
    })