【微信小程序】Vue3版本dom变化导致事件回调错乱

[CX3201]

Vue3版本的事件回调是按顺序命名的，如果有v-if这些引起结构变化的场景，会导致两次渲染同一个命名的回调绑定到不同的回调函数上面，如果事件跨跃了这次渲染就会分发错误。

以下是复现代码，快速点击按钮会有概率回调到CB3：

<template>
  <div class="invisible" v-if="C1" @click="CB1"></div>
  <div class="button" @click="CB2">{{text}}</div>
  <div class="invisible" @click="CB3">CB3</div>
</template>
<script>
export default {
  data() {
    return {
      text: '快速点击',
      C1: true,
    };
  },
  mounted() {
    setInterval(() => {
      this.C1 = !this.C1;
    }, 300);
  },
  methods: {
    CB1() {
    },
    CB2() {
      this.text = '正确: 触发了CB2';
      console.log(this.text);
    },
    CB3() {
      this.text = '错误: 触发了CB3';
      console.log(this.text);
    },
  },
};
</script>
<style lang="less">
.invisible {
  height: 0px;
}
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 80px;
  color: white;;
  background-color: red;
}
</style>

[GRCmade]

hello ，我这里运行你的代码，尝试过很多次，点击红字都没有触发过 CB3 回调。还请你再详细说明一下问题。

[CX3201]

hello ，我这里运行你的代码，尝试过很多次，点击红字都没有触发过 CB3 回调。还请你再详细说明一下问题。

你是用的哪个版本的uni-app？

[CX3201]

hello ，我这里运行你的代码，尝试过很多次，点击红字都没有触发过 CB3 回调。还请你再详细说明一下问题。

3.0.0-4040520250104002，刚试了一下在这个最新版本也是可以复现的，多点几次，点快一点

[CX3201]

hello ，我这里运行你的代码，尝试过很多次，点击红字都没有触发过 CB3 回调。还请你再详细说明一下问题。

忘了说明了，是微信小程序

[ZhenlyChen]

+1，遇到同样的问题

[GRCmade]

感谢反馈，能够复现，具体问题还需要排查，暂时推荐使用 v-show 替代

[CX3201]

感谢反馈，能够复现，具体问题还需要排查，暂时推荐使用 v-show 替代

感觉是事件底层顺序机制的问题，如果事件跨越两次渲染就会有问题，目前我们采用了patch的方法，在vOn编译的时候全局计数生成编号，然后在事件名中附加这一编号，能临时解决这个问题