Vue: @click会触发其他vnode @click事件。

看起来很正常

您的生殖器正在按预期工作...

@Kingwl @ yyx990803抱歉。 我测试别人的情况，忘了找回。

重要的代码是

<div class="header" v-if="expand"> // block 1
  <i @click="expand = false, countA++">Expand is True</i> // element 1
</div>
<div class="expand" v-if="!expand" @click="expand = true, countB++"> // block 2
  <i>Expand is False</i> // element 2
</div>

有四种情况：

• click事件监听block 1和block2 ，效果很好
• click事件监听element 1和element 2 ，效果很好
• 单击事件监听block 1和element 2 ，将expand更改为true是可以的。 但是无法改变。
• click事件监听element 1和block 2 ，不能将expand更改为false。 但是可以将expand更改为true。

因此，发生这种情况是因为：

• <i>上的内部点击事件触发，触发nextTick的第一次更新（微任务）
• 在事件冒泡到外部div之前，将处理微任务。 在更新过程中，单击侦听器将添加到外部div。
• 因为DOM结构相同，所以外部div和内部元素均被重用。
• 事件最终到达外部div，触发由第一次更新添加的侦听器，进而触发第二次更新。

这在修复中非常棘手，其他利用微任务进行更新排队的库也存在此问题（例如Preact）。 React似乎没有这个问题，因为它们使用了综合事件系统（可能是由于类似这样的极端情况）。

要解决此问题，您只需为两个外部div提供不同的键，以强制在更新过程中将其替换。 这将阻止冒泡的事件被拾取：

<div class="header" v-if="expand" key="1"> // block 1
  <i @click="expand = false, countA++">Expand is True</i> // element 1
</div>
<div class="expand" v-if="!expand" @click="expand = true, countB++" key="2"> // block 2
  <i>Expand is False</i> // element 2
</div>