前文提要：
3.0 响应式系统的设计与实现
3.1 一个稍微完善的Vue.js响应式系统
1、解决副作用函数的死循环问题
在解决了分支的切换的问题，此时还有一个代码死循环的问题，其这个死循环很容易触发，如下代码：
const data = {ok: true, text: 'hello world'}
const obj = new Proxy(data, {
get: (target, key, receiver) => {
track(target, key, receiver)
return Reflect.get(target, key, receiver)
},
set: (target, key, value, receiver) => {
Reflect.set(target, key, value, receiver)
trigger(target, key)
return true
}
});
effect(()=>{
console.log(obj.ok)
})
obj.ok = true
function trigger(target, key) {
const depsMap = bucket.get(target)
if(!depsMap) return
const effects = depsMap.get(key)
// 问题出在这里
deps && deps.forEach(fn => fn())
}
其实问题就出在trigger函数执行的过程中，这里对于obj.ok的改变导致了副作用函数执行，在执行的过程中有console.log(obj.ok)，这里再次访问了obj.ok，则将副作用函数又插回了副作用函数的执行队列中，效果相当于
const set = new Set();
set.add('one');
set.forEach(e => {
console.log(e)
set.delete(e);
set.add('one')
})
set删除值之后，再插入相同的值也会让forEach一直执行。
其实解决的方案很简单，可以在执行时将deps内的值给取出来，放在新的一个Set中，然后遍历新的Set，这样如果有新加入的值会放入deps中，而不是一边执行一边插入。
function trigger(target, key) {
const depsMap = bucket.get(target)
if(!depsMap) return
const effects = depsMap.get(key)
// 重新放入，再执行
const effectsToRun = new Set(effects)
// 将副作用函数追踪下来，防止出现set在删除时插入新值
effectsToRun.forEach(effectFn => effectFn())
}
2、解决在effect函数嵌套时出现的问题
effect函数嵌套是很常见的，比如我们嵌套的组件，父子组件都绑定了副作用函数，如：
// 当发生嵌套时
// Bar组件
const Bar = {
render() {
return...
}
}
// Foo组件为Bar的父组件
const Foo = () => {
render() {
return <Bar />
}
}
// 此时的effect发生了嵌套，相当于
effect(() => {
Foo.render()
effect(() => {
Bar.render
})
})
对于我们上面举例的副作用函数潜逃做个实验，实验代码如下
// 其余代码......
function effect(fn) {
const effectFn = () => {
activeEffect = effectFn
//先清除再执行，自然就形成了分支切换
cleanup(effectFn)
fn()
}
effectFn.deps = []
effectFn()
}
// 这里是重点
effect(() => {
console.log('effect 1 has beeen executed')
effect(() => {
console.log('effect 2 has beeen executed')
temp2 = obj.ok
})
temp1 = obj.text
})
obj.text = '1'
此时我们期望执行为触发两次外层的的effect函数，即打印结果为
effect 1 has beeen executed
effect 2 has beeen executed
effect 1 has beeen executed
effect 2 has beeen executed
在建立时能够触发一次外层effect函数，然后obj.text = 1会再次执行外层的effect函数，但是实际的结果是什么呢
effect 1 has beeen executed
effect 2 has beeen executed
effect 2 has beeen executed
这个明显和我们的期望不同，第一次外层effect函数执行输出的前两句是符合预期的，但是第二次修改obj.text触发的却是内层的effect函数。也就是说绑定的obj.text 的副作用函数变成了内层函数。
分析导致这个结果的原因还是看effect实现的过程：
let activeEffect = null
function effect(fn) {
const effectFn = () => {
activeEffect = effectFn
//先清除再执行，自然就形成了分支切换
cleanup(effectFn)
fn()
}
effectFn.deps = []
effectFn()
}
在第二层effect执行的时候activeEffect赋值为obj.ok的副作用函数，当第二层effect函数执行完之后，回到第一层时的activeEffect指向的还是第二层的effectFn，所以此时obj.text的副作用函数就成了第二层的effect函数。
其实这个过程就是函数递归时，avtiveEffect的执行也在递归过程中逐步指向内层的副作用函数，但是当递归出来的时候，activeEffect并没有从内层向外层恢复。这个问题实质上就是一个入栈出栈的问题，解决也很轻松，我们可以使用一个栈来记录副作用函数递归时每一层的指向，这样在递归出来时副作用函数指向的就是栈顶元素，代码如下：
const effectStack = []
function effect(fn) {
const effectFn = () => {
activeEffect = effectFn
//先清除再执行，自然就形成了分支切换
cleanup(effectFn)
// 用栈记录下当前的辅作用函数
effectStack.push(effectFn)
fn()
effectStack.pop()
// 递归出来时改变activeEffect指向
activeEffect = effectStack[effectStack.length-1]
}
effectFn.deps = []
effectFn()
}
其过程如图：
3、解决无限递归的问题
假设我们副作用函数的代码如下:
effect(() => {
obj.ok = obj.ok || 1
})
这个副作用函数存在的问题是对obj.ok进行了访问，又对他赋值，这会在effectFn中同时触发trigger和track，在trigger中又会触发effectFn这样下去就形成了一个死递归，报错信息为：RangeError: Maximum call stack size exceeded
解决思路就是在trigger中判断一下，就根据这个死递归的过程，在执行追踪的时候查看副作用函数activeEffect和当前调用函数是否相同，相同则跳过。
function trigger(target, key) {
const depsMap = bucket.get(target)
if(!depsMap) return
const effects = depsMap.get(key)
const effectsToRun = new Set()
effects && effects.forEach(effectFn => {
// 判断正在执行的副作用函数和当前的即将执行的函数是否相同
if(effectFn !== activeEffect)
effectsToRun.add(effectFn)
})
// 将副作用函数追踪下来，防止出现set在删除时插入新值
effectsToRun.forEach(effectFn => effectFn())
}
