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

Vue.js设计与实现学习总结(第4章3)副作用函数和函数栈

时间:2023-03-31 22:04:21 vue.js

嵌套的副作用函数是嵌套的:effect(functioneffectFn1(){effectfunctioneffectFn2(){}})effectFn1执行时,effectFn2会被执行,而Vue.js中的渲染函数是在一个副作用函数中执行的,当组件是嵌套的,会嵌套副作用函数:effect(()=>{Foo.render()effect(()=>{Bar.render()})})在当前版本中,如果获取了effectFn1绑定的属性,只会执行effectFn2,因为设置了一个全局变量,用来存放当前激活的副作用函数,也就是说同时,该变量中只存放了一个副作用函数。之后,全局变量存储effectFn2。函数栈解决嵌套问题,可以使用函数栈,在执行副作用函数时将当前的副作用函数压入栈中,在执行副作用函数时出栈。并让activeEffect始终指向栈顶的副作用函数//全局变量存储当前激活的效果函数letactiveEffectconsteffectStack=[]functioneffect(fn){consteffectFn=()=>{cleanup(effectFn)//调用当前副作用函数时,赋值给全局变量activeEffect=effectFn//在调用副作用函数之前将函数压入栈effectStack.push(effectFn)fn()//在当前副作用函数之后执行完,出栈effectSrack.pop()//activeEffect恢复到之前的值activeEffect=effectStack[effectStack.length-1]}effectFn.desp=[]effectFn()}