vue3.0系列—一个issue

vue3.0系列—响应式

vue3.0系列-渲染流程

vue3.0系列-新特性

前言

这个其实不算是vue3的内容，是在vue2版本的一个isse。是在阅读vue3源码的时候发现的issue，但是觉得比较有趣，就在这里记录下

链接：issue

问题

代码如下：

 <div class="box1" v-if="expand">
    <i @click="expand = false, countA++">Expand is True</i>
  </div>
  <div class="box2" v-if="!expand" @click="expand = true, countB++">
    <i>Expand is False</i>
  </div>
  <div>
    countA: {{countA}}
  </div>
  <div>
    countB: {{countB}}
  </div>

正常情况:

• 点击box1的i标签，expand变成fasle，box1隐藏，box2显示，countA+1
• 然后点击box2，expand变成true，box2隐藏，box1显示，countB+1

真实情况:

• 点击box1的i标签，expand变成true，box1显示，box2隐藏，countA+1，countB+1
• 继续点击，还是上面的情况

可以去该链接实际操作一下: Reproduction link

产生原因

从上面的结果上看，仿佛点击一次，box1和box2的click事件都触发了。这个是为什么呢？

尤大大在该issue回答到：

The inner click event on fires, triggering a 1st update on nextTick (microtask) The microtask is processed before the event bubbles to the outer div. During the update, a click listener is added to the outer div. Because the DOM structure is the same, both the outer div and the inner element are reused. The event finally reaches outer div, triggers the listener added by the 1st update, in turn triggering a 2nd update. This is quite tricky in fix, and other libs that leverages microtask for update queueing also have this problem (e.g. Preact). React doesn't seem to have this problem because they use a synthetic event system (probably due to edge cases like this).To work around it, you can simply give the two outer divs different keys to force them to be replaced during updates. This would prevent the bubbled event to be picked up

 function isSameVNodeType(n1: VNode, n2: VNode): boolean {
  return n1.type === n2.type && n1.key === n2.key
}

function createInvoker(
  initialValue: EventValue,
  instance: ComponentInternalInstance | null
) {
  const invoker: Invoker = (e: Event) => {
    const timeStamp = e.timeStamp || _getNow()
    if (timeStamp >= invoker.attached - 1) {
      callWithAsyncErrorHandling(
        patchStopImmediatePropagation(e, invoker.value),
        instance,
        ErrorCodes.NATIVE_EVENT_HANDLER,
        [e]
      )
    }
  }
  invoker.value = initialValue
  invoker.attached = getNow()
  return invoker
}