vue3 监听器下文章(优化:只用一个变量)

来源:1-1 课程简介

Arey_jy

2021-05-05

( 执行过程中再次添加异步任务,递归 flushJobs 继续执行完毕 )如果只用一个变量的话,此时递归时 isFlushing = true,那么进入到 flushJobs 函数时候跳出 然后 isFlushing 才设置为 fasle,那么这样会有问题不是吗?那这些执行中添加的任务只能在下一次触发 effect 函数时候才会一起执行。

function queueFlush() { 
  if (!isFlushing) { 
    isFlushing = true 
    nextTick(flushJobs) 
  } 
} 
function flushJobs(seen) { 
  let job 
  if ((process.env.NODE_ENV !== 'production')) { 
    seen = seen || new Map() 
  } 
  queue.sort((a, b) => getId(a) - getId(b)) 
  while ((job = queue.shift()) !== undefined) { 
    if (job === null) { 
      continue 
    } 
    if ((process.env.NODE_ENV !== 'production')) { 
      checkRecursiveUpdates(seen, job) 
    } 
    callWithErrorHandling(job, null, 14 /* SCHEDULER */) 
  } 
  flushPostFlushCbs(seen) 
  if (queue.length || postFlushCbs.length) { 
    flushJobs(seen) 
  } 
  isFlushing = false 
} 
写回答

1回答

ustbhuangyi

2021-05-05

并没有问题啊,注意我调整了 isFlushing = false 的位置,如果在执行 job 的时候又有新的任务添加进来,那么 queue 的长度会变化,另外在循环后还会检测一次 

 if (queue.length || postFlushCbs.length) { 
    flushJobs(seen) 
  }


如果你仍然觉得有问题的话,可以写个例子或者是单测,因为我修改后的代码是跑通了 Vue3 的单测的。

0
1
Arey_jy
确实没问题,大意了把 flushJobs 看成了 queueFlush 函数去执行了。😅
2021-05-06
共1条回复

Vue.js 源码深入解析 深入理解Vue实现原理

全方位讲解 Vue.js 源码,进阶高级工程师

4986 学习 · 1038 问题

查看课程