Vue3实现批量异步更新

const state = reactive({
  num: 1
})
effect(() => {
  console.log('num', state.num)
})
state.num++
console.log('end')

const state = reactive({
  num: 1
})
effect(() => {
  console.log('num', state.num)
})
console.log('end')
state.num++

const state = reactive({
  num: 1
})
effect(() => {
  console.log(state.num)
}, {
  // 注意这里，假如num发生变化的时候执行的是scheduler函数
  // 那么end将会被先执行，因为我们用setTimeout包裹了一层fn
  scheduler (fn) {
    // 异步执行
    setTimeout(() => {
      fn()
    }, 0)
  }
})
state.num++
console.log('end')

// 增加options参数
const effect = function (fn, options = {}) {
  const effectFn = () => {
   // ....
  }
  // ...
  // 将options参数挂在effectFn上，便于effectFn执行时可以读取到scheduler
  effectFn.options = options
}

function trigger(target, key) {
// ...
  effectsToRun.forEach((effectFn) => {
    // 当指定了scheduler时，将执行scheduler而不是注册的副作用函数effectFn
    if (effectFn.options.scheduler) {
      effectFn.options.scheduler(effectFn)
    } else {
      effectFn()
    }
  })
}

const state = reactive({
  num: 1
})
effect(() => {
  console.log('num', state.num)
})
let count = 100
while (count--) {
  state.num++
}

 const state = reactive({
  num: 1
})
const jobQueue = new Set()
const p = Promise.resolve()
let isFlushing = false
const flushJob = () => {
  if (isFlushing) {
    return
  }
  isFlushing = true
  // 微任务
  p.then(() => {
    jobQueue.forEach((job) => job())
  }).finally(() => {
    // 结束后充值设置为false
    isFlushing = false
  })
}
effect(() => {
  console.log('num', state.num)
}, {
  scheduler (fn) {
    // 每次数据发生变化都往队列中添加副作用函数
    jobQueue.add(fn)
    // 并尝试刷新job，但是一个微任务只会在事件循环中执行一次，所以哪怕num变化了100次，最后也只会执行一次副作用函数
    flushJob()
  }
})
let count = 100
while (count--) {
  state.num++
}