更新数组元素上的Dom交换用于排序可视化程序Vue.JS

Question

Vue noob非常感谢任何建议。

我正在尝试构建一个基本的排序算法可视化器，该可视化器将整数数组显示为条形图，我的目标是通过在交换之前更改被比较的两个值的颜色，让程序逐步完成比较步骤，这样用户会有一点延迟，使其更容易理解。

我目前遇到的问题是，我无法让DOM在数组更改时进行更新。我知道Vue在观察索引设置的数组变化时有一些局限性，所以我一直在使用剪接突变，我知道这应该可以解决问题，但直到整个数组排序后，我的屏幕才会更新。

我曾尝试使用setTimeout函数添加延迟，以防它发生得太快，我看不见，但这似乎并不能解决任何问题。

我试过了$forceUpdate((，我在其他一些帖子中看到过，但使用该选项也不成功。另一篇帖子建议修改div以显示为隐藏，所以我试着看看是否添加了一个"v-if"，然后将值改为false，然后又改回true，以破解它进行更新，但也没有成功。

任何帮助都将是惊人的。以下是我编写的代码示例。

bubbleSort((｛

var is_sorted = false;
var counter = 0;
while(!is_sorted){
is_sorted = true;
for( let i = 0; i < (this.num_list.length - 1 - counter); i++){
this.show = false;
this.index_compare_val_1 = this.num_list[i];
this.index_compare_val_2 = this.num_list[i +1];

// check if values need to be swapped
if(this.num_list[i] > this.num_list[i + 1]){
this.swapNumbersInArray(i, i+1)
is_sorted = false;
}
//this.show = true
setTimeout(this.show = true, 50)
}
counter =+ 1   
}
},
swapNumbersInArray(index_1, index_2){
var a = this.num_list[index_2] 
this.num_list.splice(index_2, 1, this.num_list[index_1] );
this.num_list.splice(index_1, 1, a );
this.temp_list = this.num_list
this.num_list = this.temp_list

},

Answer 1

通过使用具有setTimeout的睡眠承诺并使排序算法异步运行，通过切换方法解决了这个问题。

现在，它以正确可视化排序过程的速度逐步完成算法的动画。

以下代码：

async bubbleSort(){
console.log("Running Bubble Sort")
var is_sorted = false;
var counter = 0;
while(!is_sorted){
is_sorted = true;
for( let i = 0; i < (this.num_list.length - 1 - counter); i++){
// set compared values for coloring
this.compare_val_1 = this.num_list[i];
this.compare_val_2 = this.num_list[i +1];     
// check if values need to be swapped
if(this.num_list[i] > this.num_list[i + 1]){
this.swapNumbersInArray(i, i+1)
await this.sleep(5) // short delay so user can see the animation
is_sorted = false;
}
}
counter =+ 1  
}
this.sorted = true; // changes color to finalColor
},

sleep(ms){
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
},