捉鬼记（三）—— 调试时就正常

前言：这是捉鬼记系列的第三篇，如果你还没看过第二篇，可以看看：捉鬼记（二）—— 神秘的部分接口 404

这次终于不是周五了，某日早晨，坐我对面的同事突然探出头来，“林工，来帮忙看个问题呗~”。隐隐一些预感，鬼又来了。

他的问题是这样的，他的系统有一个页面，里面有一个 tab，因为某些特殊的需求，需要按下左右键切换前后的 tab。于是他使用了一个 hotkey 的库来做监听，然后在监听到左右键的时候，去修改 tab 的 activeIndex，activeIndex 是一个 v-model 绑定的变量。除了听过左右键切换，也可以直接点击 tab 切换，每次切换时，就会调用一个函数，用来改变 tab 下方动态载入的组件。这两个功能单独来说都是正常的，但是如果先点击 tab 切换，然后再使用左右键切换，就会出现问题，每次会切换两个 tab。

然后诡异的地方来了，我打了断点在切换执行的函数，想看看是不是执行了两次。结果，问题消失了！我再次点击 tab 切换，然后使用左右键切换，结果也是正常的。我尝试刷新页面，问题也没有出现。但是，如果把断点去掉，问题又会出现！

仿佛这个 bug 像是长了眼睛一样，发现有人在盯着他，就躲起来了。

这样的话，就只好用打印调试法了，在切换执行的函数里面，打印出 activeIndex，结果发现，点击切换后再按左右键，console 打印了两次。

那么问题的关键，就是多出来的一次是谁调用的呢？可是现在我如果下断点，问题就不会出现了，那么我就没办法通过查看堆栈知道是谁调用的了。

于是，我就把 console.log 改成 console.trace 了，这样就可以打印出堆栈了。然后，就得到了这个：

(anonymous)               	@	index.vue:72
callWithErrorHandling     	@	runtime-core.esm-bundler.js:158
callWithAsyncErrorHandling	@	runtime-core.esm-bundler.js:166
job                       	@	runtime-core.esm-bundler.js:1756
callWithErrorHandling     	@	runtime-core.esm-bundler.js:158
flushJobs                 	@	runtime-core.esm-bundler.js:357
Promise.then(异步)	
queueFlush                	@	runtime-core.esm-bundler.js:270
queueJob                  	@	runtime-core.esm-bundler.js:264
scheduler                   @	runtime-core.esm-bundler.js:1778
triggerEffect             	@	reactivity.esm-bundler.js:373
triggerEffects            	@	reactivity.esm-bundler.js:363
triggerRefValue           	@	reactivity.esm-bundler.js:974
set value                 	@	reactivity.esm-bundler.js:1018
changeCurrentName         	@	tabs.tsx:98
setCurrentName            	@	tabs.tsx:110
await in setCurrentName(异步)	
handleTabClick              @	tabs.tsx:119
callWithErrorHandling     	@	runtime-core.esm-bundler.js:158
callWithAsyncErrorHandling	@	runtime-core.esm-bundler.js:166
emit                        @	runtime-core.esm-bundler.js:664
(anonymous)	                @	runtime-core.esm-bundler.js:7422
onClick	                    @	tab-nav.tsx:331
callWithErrorHandling       @	runtime-core.esm-bundler.js:158
callWithAsyncErrorHandling	@	runtime-core.esm-bundler.js:166
invoker	                    @	runtime-dom.esm-bundler.js:278
changeTab                   @	tab-nav.tsx:234
callWithErrorHandling       @	runtime-core.esm-bundler.js:158
callWithAsyncErrorHandling	@	runtime-core.esm-bundler.js:166
invoker                   	@	runtime-dom.esm-bundler.js:278

注意其中 tab-nav.tsx 中的几笔，这是 element-plus 的 tab 组件。于是我就点进去看看 ElementPlus 的源码，发现了这么一段：

const changeTab = (e: KeyboardEvent) => {
      const code = e.code

      const { up, down, left, right } = EVENT_CODE
      if (![up, down, left, right].includes(code)) return

      // 左右上下键更换tab
      const tabList = Array.from(
        (e.currentTarget as HTMLDivElement).querySelectorAll<HTMLDivElement>(
          '[role=tab]:not(.is-disabled)'
        )
      )
      const currentIndex = tabList.indexOf(e.target as HTMLDivElement)

      let nextIndex: number
      if (code === left || code === up) {
        // left
        if (currentIndex === 0) {
          // first
          nextIndex = tabList.length - 1
        } else {
          nextIndex = currentIndex - 1
        }
      } else {
        // right
        if (currentIndex < tabList.length - 1) {
          // not last
          nextIndex = currentIndex + 1
        } else {
          nextIndex = 0
        }
      }
      tabList[nextIndex].focus({ preventScroll: true }) // 改变焦点元素
      tabList[nextIndex].click() // 选中下一个tab
      setFocus()
    }