Почему сортировка массива «вешает» страницу во Vue?

Question

[WebDev]

Подскажите, пожалуйста, в чем может быть проблема вот такого кода:

<div v-for="event in sortedEvents">

</div>

<script>
...
computed: {
    sortedEvents() {
            return this.events.sort((e1, e2) => {
                return e1.order - e2.order;
            });
    }
}
...
</script>

Страница зависает от такого кода. events - это массив из 5 элементов, свойство order у всех корректное.

UPD:
events - это массив, который загружается в родителе и передается через props. Если заглушку этого массива добавить в data, то все работает.

UPD2:
Если sortedEvents вынести в data и заполнять в created, то все работает.

UPD3:
Если sortedEvents в computed заменить на вот такой код, то все работает тоже

computed: {
            sortedEvents() {
                let array = JSON.parse(JSON.stringify(this.events));

                array.sort((e1, e2) => {
                    return e1.order - e2.order;
                });

                return array;
            },
}

То есть проблема как-то связана с изменениями this.events

Comments

[Антон Федорян]

в консоли что пишет? может там в бесконечный цикл попадает?

[WebDev]

Не могу посмотреть в консоль, так как страница недоступна. Очень похоже на бесконечный цикл, но как это возможно?

Answer 1

[Severn101]

Здесь бесконечный цикл получается.
Метод sort изменяет массив events. Vue видит изменения и повторно запускает вычисление sortedEvents.
Вам уже правильно посоветовали, используйте watch, либо делайте копию массива events в computed и сортируйте уже его.

Comments

[WebDev]

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

[WebDev]

Оказывается "искусственный" тоже вешает.

[Severn101]

WebDev, Я не проверял, но вообще да, массив, объявленный в data тоже должен также вешать. Просто изменение массива из props помимо бесконечного цикла еще и некорректно, его не стоит менять.

Answer 2

[Александр Дроздов]

Тебе надо повесить watch на events, и по срабатыванию выполнять метод сортировки массива, а тут походу из-за кучу обсерверов он и лагает.

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

Answer 3

[Redrik_Shuhart]

Выше уже отметили, что у вас бесконечный цикл.
Замените

let array = JSON.parse(JSON.stringify(this.events));

на

let array = [...JSON.parse(JSON.stringify(this.events))]