首先要明白什么事分支切换的定义，如下面代码：
const data = {ok:true, text:'hello world'}
const obj = new Proxy(data,{/*...*/})
effect(function effectFn(){
document.body.innerText = obj.ok? obj.text : 'not'
})
在effectFn函数内部有一个三元表达式，当obj.ok的值发生变化时，代码执行的分支会跟着变化，这就是分支切换。
分支切换可能会产生遗留的副作用函数，就上面代码来说，字段obj.ok的初始值为true，这时会读取字段obj.text的值，所以effectFn执行时会触发字段obj.ok和字段obj.text的读取操作，此时副作用函数和响应式数据之间的联系如下：
data
- ok
- effectFn
- text
- effectFn
当字段obj.ok的值修改为false, 并触发副作用函数重新执行后，由于此时字段obj.text不会被读取，只会触发字段obj.ok的读取操作，所以理想情况下副作用函数effectFn不应该被字段obj.text所对应的依赖集合收集
但我们现在的代码还做不到这一点，当我们把字段obj.ok的值修改为false,并触发副作用函数重新执行之后，副作用函数effectFn还是会被字段obj.text所对应的依赖集合收集，从而产生遗留的副作用函数，而遗留的副作用函数会产生不必要的更新。
就拿上面的代码来说：
修改obj.ok = false，触发更新，副作用函数重新执行，此时不会再读取obj.text的值，也就是说obj.text的值怎么改变，document.body.innerText的值都应该始终是“not”，也就是不会重新执行副作用函数。但是现在我们做不到，如果修改obj.text的值，副作用函数重新执行。
解决这个问题的思路很简单，就是每次副作用函数执行时，可以先将其从所有与之关联的依赖集合中删除。
副作用函数执行完毕后，会重新建立联系，但在新的联系中不会包含遗留的副作用函数。
要将一个副作用函数从所有与之关联的依赖集合中移除，就需要明确知道哪些依赖集合中包含。在effect内部我们定义新的effectFn函数，并为其添加effectFn.deps属性，该属性时一个数组，用来存储所有包含当前副作用函数的依赖集合：
// 用一个全局变量存储被注册的副作用函数
let activeEffect
function effect(fn){
const effectFn= () => {
// 当effectFn 执行时，将其设置为当前激活的副作用函数
activeEffect = effectFn
fn()
}
// activeEffect.deps 用来存储所有与该副作用函数相关联的依赖集合
effectFn.deps = []
effectFn()
}
下面是展示effectFn.deps数组中的依赖集合是如何收集的，其实是在track函数中：
function track(target, key){
if( !activeEffect) return
let depsMap = bucket.get(target)
if( !depsMap){
bucket.set(target, (deps = new Set()))
}
// 把当前激活的副作用函数添加到依赖集合deps中
deps.add(activeEffect)
// deps 就是一个与当前副作用函数存在联系的依赖集合
// 将其添加到 activeEffect.deps 数组中
activeEffect.deps.push(deps)
}
这样就完成了对依赖集合的收集。
有了这个联系后，就可以在每次副作用函数执行时，根据effectFn.deps获取所有相关联的依赖集合，进而将副作用函数从依赖集合中移除：
let activeEffect
function effect(fn){
const effectFn = () =>{
//调用 clearnup函数完成清除工作
cleanup(effectFn)
activeEffect = effectFn
fn()
}
effectFn.deps = []
effectFn()
}
下面是cleanup函数的实现
function cleanup(effectFn){
//遍历 effectFn.deps数组
for(let i=0;i<effectFn.deps.length;i++){
const deps = effectFn.deps[i]
// 将 effectFn从依赖集合中移除
deps.delete(effectFn)
}
// 最后需要重置effectFn.deps数组
effect.deps.length = 0
}
这样就可以避免副作用函数产生遗留。但如果尝试运行代码，会发现目前的实现会导致无限循环执行，问题出在trigger函数中：
function trigger(target, key){
const depsMap = bucket.get(target)
if(!depsMap) return
const effects = depsMap.get(key)
effects && effects.forEach(fn => fn()) //问题出在这儿
}
在trigger函数内部，当副作用函数执行时，会调用cleanup进行清除，但是副作用函数的执行会导致其重新被收集到集合中，而此时对于effects集合的遍历仍在进行。这个行为可用下面的代码来表达：
const set = new Set([1])
set.forEach(item=>{
set.delete(1)
set.add(1)
console.log('遍历中')
})
其实解决办法很简单，可以构造另一个Set集合并遍历它
const set = new Set([1])
const newSet = new Set(set)
newSet .forEach(item=>{
set.delete(1)
set.add(1)
console.log('遍历中')
})
这样就不会无限执行了。回到trigger函数，需要同样手段来避免无限执行
function trigger(target, key){
const depsMap = bucket.get(target)
if(!depsMap) return
const effects = depsMap.get(key)
const effectsToRun = new Set(effects) //新增
effectsToRun.forEach(effectFn => effectFn())
// effects && effects.forEach(fn => fn())
}
