【vue设计与实现】响应系统的作用与实现 2-分支切换和cleanup

首先要明白什么是分支切换的定义，如下面代码：

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()) 
}