dcloudio / dcloudio/uni-app

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

Open
#5,307 10 comments 0 reactions 1 assignee Claimed by @GRCmade View on GitHub
Dominant language
JavaScript
Stars
41.6k
Forks
3.7k
Avg merge
7h 6m
Merged PRs (30d)
6

Description

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

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


{{text}}

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);
},
},
};

.invisible {
height: 0px;
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
font-size: 80px;
color: white;;
background-color: red;
}

```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.