当前位置: 首页 > Web前端 > vue.js

Vue.js设计与实现学习总结(第4章5)调度执行

时间:2023-03-31 20:48:23 vue.js

调度执行是指当触发动作触发副作用函数重新执行时,可以确定函数执行的时机、频率和方式。以下面的代码为例constdata={foo:1}constobj=newProxy(data,/*----*/)effect(()=>{console.log(obj.foo)})obj.foo++console.log('End')代码输出为:12end如果此时需要打印顺序调整为:1endswith2,需要响应系统支持调度是需要在不调整代码的情况下实现更改。effect函数可以设计一个option参数options,让用户指定scheduler:effect(()=>{console.log(obj.foo)},{//scheduler调度器是一个函数scheduler(fn){//...}})所以options也需要挂载在副作用函数中:functioneffect(fn,options={}){consteffectFn=()=>{cleanup(effectFn)//调用effect注册一个副作用函数,将副作用函数复制到activeEffectactiveEffect=effectFn//在调用副作用函数之前将函数压入堆栈effectStack.push(effectFn)fn()//弹出当前的副作用函数并将activeEffect恢复为其先前的值effectStack.pop()activeEffect=effectStack[effectStack.length-1]}//将选项装载到effectFneffectFn。options=options//activeEffect.deps用于存放所有与副作用函数相关的依赖集effectFn.deps=[]//执行副作用函数effectFn()}当触发函数中的副作用函数为重新执行,可以直接调用用户传递的scheduler函数来控制权限给用户:functiontrigger(target,key){constdepsMap=bucket.get(target)if(!depsMap)returnconsteffects=depsMap.get(key)consteffectsToRun=newSet()effects&&effects.forEach(effectFn=>{//如果trigger触发的副作用函数和当前正在执行的函数相同,则不会触发执行if(effectFn!==activeEffect){effectsToRun.add(effectFn)}})effectsToRun.forEach(effectFn=>{//如果副作用函数有调度器,调用调度器,并将副作用函数作为参数传递if(effectFn.options.scheduler){effectFn.options.scheduler(effectFn)}else{//否则,直接执行副作用函数effectFn()}})}