Vue.js Vuetify进度条不同步该值

我有一个复制我实际所做的例子。当在数组上推送一个新项目时，计数器将增加，并将值设置为进度

例如，我准备了一个JSFIDLE：

newvue({
el:“#应用程序”，
数据（）{
返回{
值确定：0，
总数：1000，
超时：0，
iteraciones:1000
}
},
方法：{
异步单击（）{
var-arr=[]；
var总和=0；
此.valuedefinite=0；
等待这个.forEach（this.iteraciones，async（i）=>{
等待这个。睡眠（1）；
arr.push（1）；
sum++；
本条规定的进度条（总和）；
clearTimeout（this.timeOut）；
})      
},
设置进度条（num）{
if（num）{
this.valuedefinite=Math.round（this.Map（num））；
}
},
地图（价值）{
返回（（value-0）*（100-0））/（this.total-0）+0；
},
异步forEach（arr，回调）{
for（设i=0；ithis.timeOut=setTimeout（resolve，milisegudos））；
},
}
})

---

只需编辑'total'和'iteraciones'的值（两者必须相同）并运行。如果数字高达1000，则进度没有问题。但是如果值我怀疑进度条突然跳起来可能与浏览器没有跟上Vue对虚拟DOM的快速更新有关

我想你可以通过调整你的睡眠时间来解决这个问题。定义一个新属性“sleepInterval”，并使用

writeable:false将其冻结

...
Object.defineProperty(this, 'sleepInterval', {
   value: 4000/this.total, 
   writeable: false
});
await this.forEach(this.iteraciones, async (i) => {
   await this.Sleep(this.sleepInterval);
   arr.push(1);
   sum++;
   this.SetProgressBar(sum);
   clearTimeout(this.timeOut);
})    

更新JSFIDLE:

为什么我使用
4000
作为红利？因为它似乎在这种情况下效果很好，给出了睡眠间隔的商，让进度条以令人满意的速度前进<代码>5000

也会起到类似的作用。也许有一个更好的公式可以产生一个更准确的睡眠时间间隔，但我想不出一个现成的

部分问题是进度条上的动画过渡。如果您在CSS中包含这一点，则一切正常：

.v-progress-linear\uuuuuuuu条、.v-progress-linear\uuuuuuu条确定{
过渡：无；
}

虽然这足以“修复”它，但这并不是全部。所以，让我们摆脱这个黑客，再深入挖掘一点

下一个问题是，您经常更新进度条，以至于动画过渡没有机会开始。每次更新该值时，它都将从当前宽度重新开始。因为“当前”宽度从未离开0的每一帧都会发生这种情况。目标宽度越来越大，但它卡在动画的第一帧上，这使宽度保持为0

对于较大的值（如1000），它似乎可以正常工作的原因是四舍五入。几个连续的值将四舍五入为同一个值，因此实际上不会发生任何更改，从而允许进行转换。但是对于较小的值，每次都会更新该值，因此动画无法超出第一帧

要直接查看舍入的效果，请尝试更改此行：

this.valuedefinite=Math.round（this.Map（num））；

为此：

this.valuedefinite=this.Map（num）；

在运行之前，请确保删除了我前面概述的CSS hack。您会发现，即使总数为1000，进度条现在也会暂停。如果没有作为缓冲区的舍入，我们将用微小的更新轰炸进度条，并重置动画过渡

...
Object.defineProperty(this, 'sleepInterval', {
   value: 4000/this.total, 
   writeable: false
});
await this.forEach(this.iteraciones, async (i) => {
   await this.Sleep(this.sleepInterval);
   arr.push(1);
   sum++;
   this.SetProgressBar(sum);
   clearTimeout(this.timeOut);
})