Блог

Vue здесь новичок, который будет очень благодарен за любой совет.

Я пытаюсь создать визуализатор базового алгоритма сортировки, который будет отображать массив целых чисел в виде гистограммы, и моя цель состоит в том, чтобы программа выполнила шаги сравнения, изменив цвета двух сравниваемых значений перед их заменой, чтобы у пользователя была небольшая задержка, чтобы сделать ихлегче понять.

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что я не могу заставить DOM обновляться при изменении массива. Я знаю, что Vue имеет некоторые ограничения, когда дело доходит до отслеживания изменений массивов при установке по индексу, поэтому я использую мутацию splice, которая, как я понимаю, должна разрешить ее, однако мой экран не обновляется, пока весь массив не будет отсортирован.

Я попытался использовать функцию 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


   },
  

Решаемая эта проблема путем переключения подхода путем использования sleep promise, который имеет 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);
            });
        },