避免无限递归循环
看下面的例子：
const data = {foo:1}
const obj = new Proxy(data,{/*...*/})
effect(()=>obj.foo++)
可以看到这里有个自增操作obj.foo++，该操作会引起栈溢出：
Uncaught RangeError: Maximum call stack size exceded
下面来搞清楚这个问题是为什么。
实际上，把obj.foo++这个操作分开来看，相当于：
effect(()=>{
obj.foo = obj.foo + 1
})
这里机会读取obj.foo的值，又会设置obj.foo的值，这就是导致这个问题的原因。这里代码的执行流程如下：
首先读取obj.foo的值，触发track操作，将当前副作用函数收集到“桶”中；
接着加1赋值给obj.foo，此时会触发trigger操作，即把“桶”中的副作用函数取出并执行。
但问题是该副作用函数正在执行，还没有执行完，就要开始下一次的执行。这样就会导致无限递归地调用自己，于是就产生了栈溢出。
这里可以观察发现，读取和设置操作是在同一个副作用函数内进行的。此时track收集的和trigger要触发的都是activeEffect。要解决这个问题，我们可以在trigger动作发生时增加守卫条件。
**如果trigger所执行的副作用函数与当前正在执行的副作用函数相同，则不触发执行。**代码如下：
function trigger(target, key){
const depsMap = bucket.get(target)
if(!depsMap) return
const effects = depsMap,get(key)
const effectsTorRun = new Set()
effeects && effects.forEach(effecetFn => {
// 如果trigger触发执行的副作用与当前正在执行的副作用函数相同，则不触发执行
if (effectFn != activeEffect){
effectsToRun.add(effectFn)
}
})
effectsToRun.forEach(effectFn => effectFn())
}
这样就能比弥漫无限递归调用，从而避免栈溢出
调度执行
可调度性指的是trigger动作触发副作用函数重新执行时，有能力决定副作用函数执行的时机，次数的方式。
首先来看，如何决定副作用函数的执行方式，以下面的代码为例：
const data = {foo:1}
const obj = new Proxy(data,{/*...*/})
effect(()=>{
console.log(obj.foo)
})
obj.foo++
console.log('结束了')
这段代码的输出结果如下：
1
2
‘结束了’
现在假设需求有变，输出顺序调整为：
1
‘结束了’
2
调整代码执行顺序可以很简单的解决这个问题，但是有没有办法在不调整代码执行顺序就实现需求的。这时就需要响应系统支持调度。
可以为effect函数设计一个选项参数options,允许用户指定调度器，如下：
effect{
() => {
console.log(obj.foo)
}
// options
{
// 调度器 scheduler是一个函数
scheduler(fn){
// ...
}
}
}
用户在调用effect时，可以传递第二个参数options，options是一个对象，其中允许指定scheduler调度函数；
同时在effect函数内部需要把options选项挂载到对应的副作用函数上。
function effect(fn, options = {}){
const effectFn = () => {
cleanup(effectFn)
activeEffect = effectFn
effectStack.push(effectFn)
fn()
effectStack.pop()
activeEffect = effectStack[effectStack.length - 1]
}
// 将 options 挂载到 effectFn上
effectFn.options = options
effectFn.deps = []
// 执行副作用函数
effectFn()
}
有了调度函数，就可以在trigger函数中触发副作用函数重新执行时，直接调用用户出传递的调度器函数，从而把控制权交给用户：
function trigger(target, key){
const depsMap = bucket.get(target)
if(!depsMap) return
const effects = depsMap.get(key)
const effectsToRun = new Set()
effeects && effects.forEach(effecetFn => {
// 如果trigger触发执行的副作用与当前正在执行的副作用函数相同，则不触发执行
if (effectFn != activeEffect){
effectsToRun.add(effectFn)
}
})
effectsToRun.forEach(effectFn => {
// 如果一个副作用函数存在调度器，则调用该调度器，并将副作用函数作为参数传递
if(effectFn.options.scheduler){
effectFn.options.scheduler(effectFn)
}else{
// 否则直接执行副作用函数（之前的默认行为）
effectFn()
}
})
}
注意要把当前副作用函数作为参数传递到调度器中
有了这些，就可以实现前文的需求了，如下代码：
const data = {foo:1}
const obj = new Proxy(data,{/*...*/})
effect{
() => {
console.log(obj.foo)
}
// options
{
// 调度器 scheduler是一个函数
scheduler(fn){
// 将副作用函数放到宏任务队列中执行
setTimeout(fn)
}
}
}
effect(()=>{
console.log(obj.foo)
})
obj.foo++
console.log('结束了')
这里使用setTimeout开启一个宏任务执行副作用函数fn，这样就能改变代码执行顺序。
除了控制副作用函数的执行顺序，通过调度器还可以做到控制它的执行次数，这一点也尤为重要。看下面例子：
const data = { foo: 1 }
const obj = new Proxy(data, { /*...*/})
effect(()=>{
console.log(obj.foo)
})
obj.foo++
obj.foo++
在没有指定调度器的情况下，输出如下：
1
2
3
如果我们只关心最终结果而不关心过程，那么执行三次打印操作是多余的，我们期望的打印结果是：
1
3
基于调度器我们可以很容易地实现此功能
// 定义一个任务队列
const jobQueue = new Set()
// 使用Promise.resolve()创建一个promise实例，我们用它将一个任务添加到任务队列
const p = Promise.resolve()
// 一个标志代表是否在刷新队列
let isFlushing = false
function flushJob(){
// 如果队列在刷新就什么都不做
if(isFlushing) return
// 设置为true,代表正在刷新
isFlushing = true
// 在微任务队列中刷新jobQueue队列
p.then(()=>{
jobQueue.forEach(job=>job())
}).finally(()=>{
//结束后重置 isFlushing
isFlushing = false
})
}
effect(()=>{
console.log(obj.foo)
}, {
scheduler(fn){
//每次调度时，将副作用函数添加到jobQueue队列中
jobQueue.add(fn)
// 调用flushJob刷新队列
flushJob()
}
})
obj.foo++
obj.foo++
整段代码的效果是，连续对obj.foo执行两次自增操作，会同步且连续执行两次scheduler调度函数，也就是同一个副作用函数会被jobQueue.add(fn)添加两次，但由于Set数据结构的去重能力，最终jobQueue中只会有一项，就是当前的副作用函数。
类似地，flushJob也会同步且连续执行两次，但由于isFlushing，实际上flushJob函数在一个事件循环内只会执行一次，即在微任务内执行一次。
当微任务队列开始执行时，就会遍历jobQueue并执行里面存储的副作用函数，由于此时jobQueue队列内只有一个副作用函数，所以只会执行一次，并且当它执行时，字段obj.foo的值已经是3了，这样就实现期望的功能了。
实际上Vue.js内部实现了一个更加完善的调度器，思路和上文的相同。
