广州建设银行网站首页企业网站seo服务
【Vue3源码】第二章 effect功能的完善补充
前言
上一章节我们实现了effect函数的功能stop和onstop，这次来优化下stop功能。
优化stop功能
之前我们的单元测试中，stop已经可以成功停止了响应式更新（清空了收集到的dep依赖）
stop功能其实还存在很大的问题，就是不能停止对象中的++操作
为什么呢？
看个例子
let user = { age : 10 }user.age++
//++是一个语法糖，他在js中的表现为
//user.age = user.age + 1
看了例子我们就可以明白为什么stop功能会存在漏洞了，因为user.age = user.age + 1 这句代码在响应式中user.age + 1会先触发get捕获器然后 +1触发set捕获器
那么get捕获器又会重新收集依赖，我们之前stop清空的依赖就又回来了导致无法stop响应式更新这个漏洞出现
怎么解决这个问题？
我们可以从run方法和track函数切入，只要判断调用run方法track就去收集依赖，如果是stop调用的run方法，track函数就不要去收集依赖即可。
1.单元测试代码
进入effect.spec.ts文件
还是使用之前的stop单元测试代码即可
我们把obj.prop = 3 改为 obj.prop++
it("stop",() => {let dummy;const obj = reactive({prop:1})const runner = effect(() => {dummy = obj.prop})obj.prop = 2expect(dummy).toBe(2)stop(runner)// 修改// obj.prop = 3obj.prop++expect(dummy).toBe(2)//stopped effect should still be manually callablerunner()expect(dummy).toBe(3)})
2.优化run方法
进入effect.ts文件
我们再通过新增一个全局变量shouldTrack，作为开关，去有效的控制track进行依赖收集
//新增
let shouldTrack;class ReactiveEffect {private _fn;active = true;deps = [];onStop?: () => void;constructor(fn, public scheduler?) {this._fn = fn;this.scheduler = scheduler;}//修改run() {// 3.因为默认shouldTrack= false// 4.调用了stop的时候直接执行了this._fn()// 5.但是shouldTrack是关上的if (!this.active) {return this._fn()}// 1.run的时候才会开启开关shouldTrack = true;activeEffect = this;const result = this._fn();// 2.reset,生成ReactiveEffect类时，我们都会默认调用 _effect.run()方法，所以默认执行完this._fn()后都会重置 shouldTrack = falseshouldTrack = false;return result}stop() {if (this.active) {clearupEffect(this);if (this.onStop) {this.onStop()}this.active = false}}
}
调用run()方法的时候会去开启shouldTrack开关，因为生成ReactiveEffect类时我们都会默认调用 _effect.run()方法，所以默认的 this._fn()执行完后都会使shouldTrack 重置为 shouldTrack = false
那么就出现以下两种情况:
正常调用effect.run() 和 stop调用 effect.run()
他们通过shouldTrack这个开关就可以识别，所以我们可以通过shouldTrack全局变量去判断track是否该触发依赖收集
3.优化track函数
vue3源码就是通过shouldTrack和activeEffect两个开关去控制track函数执行，来达到可以控制的依赖收集功能
//依赖收集
export function track(target, key) {// 6.如果是stop调用那么在触发track时，因为shouldTrack是false，所以track就不能执行了// 7.如果是run()调用那么在触发track时，因为shouldTrack是true，所以可以执行track逻辑，等track结束，才把shouldTrack = falseif (activeEffect && shouldTrack) {let depsMap = targetMap.get(target);if (!depsMap) {depsMap = new Map();targetMap.set(target, depsMap);}let dep = depsMap.get(key);if (!dep) {dep = new Set();depsMap.set(key, dep);}dep.add(activeEffect);//浅拷贝反向收集到depactiveEffect.deps.push(dep);}
}
4.优化clearupEffect函数
用for代替了forEach提高性能，如果清空了依赖我们就把deps的length也清空，最大程度的优化性能
function clearupEffect(effect) {const { deps } = effectif (deps.length) {for (let i = 0; i < deps.length; i++) {//因为是浅拷贝收集到的dep，所以这里删掉对应的dep就没有了，没有dep（二级分类）自然就无法触发run方法！deps[i].delete(effect)}deps.length = 0}
}
5.代码运行流程图
上面就基本把stop的漏洞修复了，我们来看下run方法运行和stop方法运行时的区别
通过所有测试！
