Vue如何有效解决异步数据更新导致的性能瓶颈问题？

本文共计371个文字，预计阅读时间需要2分钟。

问题+记录一下出现的问题，数据翻倍+这是重复问题的代码+data()+javascriptfunction getmessage() { this.allresult=[]; axios.get(https://gist.githubusercontent.com/xiaolannuoyi/9b0def) .then(response=> { this.allresult.push(response.data); }) .catch(error=> { console.error(Error fetching data: , error); });}

问题

记录一下出现的问题, 数据翻倍

这是复现问题的代码

data() { return { space: "", allresult: [] }; }, methods: { getmessage() { this.allresult = []; axios .get( "gist.githubusercontent.com/xiaolannuoyi/9b0defe4959e71fa97e6096cc4f82ba4/raw/4be939123d488cee7ecefc055fb5ecb2ed8d5c8d/test" ) .then(data => { console.log(data); let result = data.data; for (let i = 0; i < result.length; i++) { //原因在于这里的this.Allresult this.allresult.push({ id: result[i].id, name: result[i].name, age: result[i].age }); } console.log('此时的this.allresult',this.allresult); }); } }, watch: { space() { console.log("watch"); this.getmessage(); } }, mounted() { this.space = "123"; console.log("mounted"); this.getmessage(); }

结果

此时你可以看到第二次的数据时 是 第一次的 2倍

原因

mounted 和 watch 都执行 getmessage 方法,虽然方法之前 对数据进行了清空,但是 异步请求执行的慢,

所以两次调用getmessage相当于 this.allresult = []; this.allresult = []; axios...;axios....: 这个顺序

所以才会出现上述现象

解决

1.修改this.allresult = []的位置

2.新建一个临时空数组

以上这篇vue 解决异步数据更新问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持易盾网络。