vue3 源码解读之 time slicing的使用方法

今天给大家带来一篇源码解析的文章，emm 是关于 vue3 的，vue3 源码放出后，已经有很多文章来分析它的源码，我觉得很快又要烂大街了，哈哈

不过今天我要解析的部分是已经被废除的 time slicing 部分，这部分源码曾经出现在 vue conf 2018 的视频中，但是源码已经被移除掉了，之后可能也不会有人关注，所以应该不会烂大街

打包

阅读源码之前，需要先进行打包，打包出一份干净可调试的文件很重要

vue3 使用的 rollup 进行打包，我们需要先对它进行改造

import cleanup from 'rollup-plugin-cleanup'
plugins: [
  cleanup() //增加了一个 cleanup 插件
  tsPlugin,
  aliasPlugin,
  createReplacePlugin(isProductionBuild, isBunlderESMBuild, isCompat),
  ...plugins
],

增加 cleanup 插件主要目的是打包出无注释的文件

以上，是我个人阅读源码的习惯，我觉得注释和类型的作用就是碍眼的，所以先去掉再说

用例

我们在读源码之前，需要先实现一个正确用例，但是我读的这个版本的源码，还是 class 的，怎么办？

这个时候我们可以根据测试用例来猜测并给出代码

function block () {
 const start = performance.now()
 while (performance.now() - start < 2) {
 }
}
class Test extend Component {
 render (props) {
  block()
  return h('li', props.msg)
 }
}
class App extend Component {
 msg = ''
 render () {
  const list = []  for (let i = 0; i < 200; i++) {
   list.push(h(Test, { key: i, msg: this.msg }))
  }
  return [
   h('input', {
    onInput: e => {
     this.msg = e.target.value
    }
   }),
   h('div',list)
  ] }
}

很好，现在我们有了一个争取，简单的用例了，接下来就是一股脑调试

调试

由于我在 fre 中也实现了时间切片，所以我对它非常了解，我知道它的作用原理，所以我们直接搜索宏任务，哈，果然有

window.addEventListener('message', event => {
  if (event.source !== window || event.data !== key) {
    return;
  }
  flushStartTimestamp = getNow();
  try {
    flush();
  }
  catch (e) {
    handleError(e);
  }
}, false);
function flushAfterMacroTask() {
  window.postMessage(key, `*`);
}

这段代码非常容易理解，就是在宏任务队列里执行了 flush 函数，继续

然后关键就来了

function flush() {
  let job;
  while (true) {
    job = stageQueue.shift();
    if (job) {
      stageJob(job);								 
 1/3    1 2 3 下一页 尾页