Vue — показывать загрузчик во время вычисления вычисляемого свойства
РЕДАКТИРОВАТЬ. Обнаружено, что сортировка выполняется быстро, реальная проблема заключается в производительности рендеринга огромного списка, поэтому уже ответил
Пожалуйста, объясните мне, почему это ничего не делает:
У меня есть массив из тысяч элементов, есть кнопка для их сортировки по какой-то опоре (меняет опору "sortBy". Сортировка элементов занимает почти 2 секунды, по крайней мере, сколько времени после щелчка изменяется список. Во время вычислений (до новых отображается список) я хочу отобразить какой-то элемент «Загрузка». Я не знаю, может быть, у Vue есть какое-то состояние всего приложения, чтобы сказать, что что-то пересчитывается?
<div v-if = "loading">Wait pliz</div>
<div @click = "sortBy='ctg'">SortByCtg</div>
<div v-for = "item in sortedRows">{{item.ctg}} , {{item.name}} .... </div>
и вычисленная опора fn:
data: function(){
return {
'sortby': 'name',
'sortbyDir': 1,
'loading': false,
'rows': [ {'name':'abc','ctg':'def'}, ...]
}
},
computed: {
sortedRows: function(){
this.loading = true; // <<< should show element
var sortby = this.sortby;
var sortbyDir = this.sortbyDir;
var sorted = this.rows;
sorted = this.rows.sort(function(a, b) {
return sortbyDir * a[sortby].localeCompare(b[sortby]);
});
this.loading = false; // <<< hide element
return sorted;
}
},
...
но элемент «загрузка» никогда не отображается. Может быть, сортировка быстрая, а что занимает время, так это сама генерация узлов? Тогда я могу как-нибудь показать загрузчик? Может быть, как-то использовать следующий тик? Я пробовал, но безрезультатно.
@MarioSantini хорошо, я думал, что это ясно, но добавил, как вы указали
@PM_KLS Эта переменная loading инициализирована в вашем data: function() {}? Я вижу только sortBy и rows как объявленные.
@Vitomir уверен, что «загрузка» инициализирована как ложная, добавлена в пример кода
ОБНОВЛЕНИЕ - измерено с использованием разницы Date.now(); и в начале и в конце fn , кажется, всего около 15 мс ... так что реальное замедление может быть в другом месте - возможно, при перерисовке самого списка из-за слишком большого количества элементов .... есть идеи?
Вы можете протестировать свой код, добавив тайм-аут к this.loading = false. Если значок не отображается, вы точно знаете, что он не отображается.
@Wimanicesir это показывает, я только что обнаружил, что сортировка fn быстрая, что значит, что долгое время генерируются узлы в документе (около 3500 строк таблицы на данный момент). Сейчас я ищу возможность проверить, активно ли приложение перерисовывает... идеи?
Здесь есть много вариантов. Я бы посоветовал вам сделать таблицу с разбивкой на страницы, чтобы не загружать слишком много. Я не знаю, какова ваша цель с данными, но вы всегда можете рассмотреть возможность использования Object.Freeze(). Это устраняет реактивность, но должно генерироваться намного быстрее :)
Первое правило для отображения такого количества записей в таблице — использовать разбиение на страницы, независимо от того, будет ли это с выбором страницы (1, 2, 3 и т. д.) или будет загружаться около 20-30 записей при прокрутке. В своих проектах я всегда использую разбиение на страницы со страницами, а максимальное количество записей на странице — 100. Однако это означает, что вам также придется модифицировать серверную часть, если вы получаете данные из API.
Ответы 2
«Сортировка элементов занимает почти 2 секунды» и «Может быть, сортировка будет быстрой» противоречат друг другу, но вы не видите индикатора загрузки ни в одном из них. Обычно сортировка заканчивается через несколько мс, вы почти ничего не видите. Другая возможность: если он работает в течение 2 секунд (медленный алгоритм или рендеринг тысяч строк на странице после сортировки), он блокирует основной поток, и вы не увидите никаких изменений на странице.
Ваш код должен работать, но вы не должны изменять данные в вычислении. Метод сортировки изменяет исходный массив, и вы меняете переменную загрузки. Он также может запускаться несколько раз без необходимости.
да, я уже обнаружил, что сортировка на самом деле составляет всего ~ 20 мс, поэтому долгое время - это когда элементы перерисовываются. О том, что я не должен изменять данные в cpmputed, в этом весь смысл вычислений ... я использую консольный журнал и вижу, что пересчет происходит ТОЛЬКО, если я нажимаю кнопку, поэтому он действительно делает это «один раз» после нажатия ... но как я могу ждать, пока большой список будет перерисован? могу ли я сказать, что повторный рендеринг закончился?
Это должен был быть комментарий. Тогда вы также увидите, что половина вашего ответа уже сказана :)
Computed — геттер, он должен изменять только копию данных. Из документа: «Важно помнить, что вычисляемые функции получения должны выполнять только чистые вычисления и не иметь побочных эффектов». Для ускорения рендеринга можно использовать любой из этих приемов: бесконечная прокрутка, нумерация страниц, виртуальный список
Сортировка выполняется быстро (несколько миллисекунд), что действительно требует времени, так это рендеринг длинного списка
Это должен быть комментарий. Также ОП указал на это в своем комментарии за 18 минут до того, как вы опубликовали этот ответ.
@Wimanicesir хорошо, я ОП, и я решил ответить на свой вопрос, потому что я вижу, что это не проблема сортировки, проблема производительности рендеринга, поэтому я считаю, что это решено
@ Wimanicesir, ты совершенно не прав. То, что это кратко, не означает, что это не ответ на вопрос. Или правильный ответ. Можно ли его улучшить и/или расширить? Абсолютно! Это должен быть комментарий? Точно нет. Для Stack Overflow публиковать ответы в виде комментариев вредно. Они, как правило, не помогают будущим пользователям, столкнувшимся с той же проблемой, и препятствуют правильной индексации, а также ограничивают пользователей, которые в противном случае ответили бы на вопрос, от публикации ответа.
Как сейчас написано, ваш ответ неясен. Пожалуйста, отредактируйте , чтобы добавить дополнительные сведения, которые помогут другим понять, как это отвечает на заданный вопрос. Вы можете найти больше информации о том, как писать хорошие ответы в справочном центре.
@tao Я пропустил, это был ОП. Однако я могу изменить свой голос только в том случае, если это будет отредактировано. Также это не ответ, это говорит о том, в чем была проблема, но не о том, как ее решить. Я не знаю, как будущие пользователи будут использовать этот «ответ». ИМО, это все еще следует отредактировать в вопросе, поскольку из этого будет получено реальное решение.
В коде, который вы нам показываете, вы не показали, когда
sordedRowsявляется вызовом, и является лиthis.loadingреактивным свойством, и какое начальное значение. Чтобы проверить свое предположение о том, что сортировка происходит настолько быстро, что она просто происходит, вы можете просто прокомментироватьthis.loading = falseи проверить, появляется ли div.