在Vue中,切换Tab时数据重复加载是一个常见问题,尤其是在快速切换Tab或异步请求数据时。以下是解决方案及其适用场景:
·
使用随机标识符控制请求
在切换Tab时,生成一个随机标识符(如时间戳),并在请求返回时检查当前标识符是否与请求时一致。如果不一致,则丢弃该次请求的数据,避免数据错乱。
data() {
return {
random: new Date().valueOf(),
activeTab: 0,
list: []
};
},
watch: {
activeTab: {
handler(val) {
this.random = new Date().valueOf();
this.getList();
}
}
},
methods: {
getList() {
const random = this.random;
api().then((list) => {
if (this.random !== random) return;
this.list = this.list.concat(list);
});
}
}
DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐

所有评论(0)