Javascript 更新数组元素交换上的Dom以对visualiser Vue.JS进行排序

这里的Vue noob非常感谢您的建议

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

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

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

我试过这个。我在其他一些帖子上看到过这个$forceUpdate（），但也没有成功。另一篇文章建议修改div以显示隐藏，因此我尝试查看是否添加了一个“v-if”，然后将值更改为false，然后再更改为true以对其进行黑客攻击以进行更新，但也没有成功

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

泡泡运动{

var是_sorted=false；
var计数器=0；
而（！已排序）{
is_sorted=true；
for（设i=0；i<（this.num_list.length-1-计数器）；i++）{
this.show=false；
this.index_compare_val_1=this.num_list[i]；
this.index_compare_val_2=this.num_list[i+1]；
//检查是否需要交换值
if（this.num_list[i]>this.num_list[i+1]）{
这个.swapNumbersInArray（i，i+1）
is_sorted=false；
}
//this.show=true
setTimeout（this.show=true，50）
}
计数器=+1
}
},
SwapNumber数组（索引1，索引2）{
var a=这个.num_列表[索引_2]
this.num_list.splice（索引2,1，this.num_list[index_1]）；
这个.num_list.splice（索引1,1,a）；
this.temp\u list=this.num\u list
this.num_list=this.temp_list
},

通过使用具有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);
            });
        },

async bubbleSort（）{
log（“运行气泡排序”）
var是_sorted=false；
var计数器=0；
而（！已排序）{
is_sorted=true；
for（设i=0；i<（this.num_list.length-1-计数器）；i++）{
//设置颜色的比较值
this.compare_val_1=this.num_list[i]；
this.compare_val_2=这个.num_列表[i+1]；
//检查是否需要交换值
if（this.num_list[i]>this.num_list[i+1]）{
这个.swapNumbersInArray（i，i+1）
等待。sleep（5）//短暂延迟，以便用户可以看到动画
is_sorted=false；
}
}
计数器=+1
}
this.sorted=true；//将颜色更改为最终颜色
},
睡眠（毫秒）{
返回新承诺（（解决）=>{
设置超时（解析，毫秒）；
});
},

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