Почему Vue долго рендерит после загрузки данных?

Question

[Валерий В.]

Добрый день!
После прихода данных vue меняет данные в приложении спустя несколько секунд. 3-5 сек.
Данные уже пришли с сервера, но что то тормозит их изменение на экране.
В чем может быть причина?

Answer 1

[McBernar]

Откройте консоль и посмотрите network.

Если дело реально в рендере - повесьте таймеры на методы, которые обрабатывают данные.

Мы не сможем здесь вам помочь без вашего кода.

Comments

[Валерий В.]

1. Что нужно увидеть в консоли? Данные точно приходят менее чем за пол секунды.
2. Как это - повесить таймеры? И куда конкретно их вешать?
3. Код простой. Табличные данные с сервера попадают в vuex, оттуда в компонент таблицу, в таблице каждая ячейка это отдельный компонент с листенерами разных событий.
Таблица не большая, 30 столбцов на 200 строк.
После загрузки данных несколько раз браузер памяти жрет более 300 мб. Но сборщик через некоторое время оставляет около 40 мб. Это если ничего не делать.

[McBernar]

Валерий В., ну вот вы и ответили. 6 тысяч компонентов + на каждый еще и ивент.

[Алексей Ярков]

Валерий В., 30 столбцов на 200 строк это небольшая таблица? У меня плохие новости...
Сделайте постраничное отображение, чтобы таблица умещалась в 1 экран, и будет вам счастье.

[Валерий В.]

McBernar, вы не поняли. Таблица более 10 000 строк с реальными данными. Но я гружу по 200 строк на страницу. Это так много для Vue ??

[Валерий В.]

Алексей Ярков, я сначала делал полностью нативный компонент таблицы на ванильном js без vue, но там слишком много обвязок пришлось делать для проброса в компонент реактивности и событий для связи с Vue. Но зато таблица быстро работала со большим объемом данных. Потом решил переделать на собственные механизмы Vue, и теперь оказалось, что Vue просто не тянет такой объем данных.
Как бы мне облегчить работу компонента? В чем там основная проблема? Вроде читал, что Vue на каждый чих добавляет кучу обсерверов, которые замедляют работу, может их как то уменьшить?
В общем, нужен совет как оптимизировать компонент, исправить или удалить затратные по ресурсам операции (какие? что более затратно?), что то еще. Что размер уменьшить- это понятно, но по 10 строк отображать тоже не вариант.

[Алексей Ярков]

Валерий В., а вам тупо отображать таблицу? Реактивность не нужна?

[McBernar]

Валерий В., зачем вам оптимизировать vue, если можно не тащить в одну таблицу 6000 компонентов? :)

[Валерий В.]

Алексей Ярков, скажем так - можно обойти реактивность другими методами. А так - обычная табличная работа - CRUD.

[Валерий В.]

McBernar, а по существу что-нибудь скажете? С вашим подходом можно экстраполировать дальше - а зачем вообще изобретать велосипед, ведь есть куча уже готовых инструментов )))

[Алексей Ярков]

Валерий В., есть возможность песочницу сделать с кодом? Было бы гораздо понятнее. Например в https://codesandbox.io/s/vue

[Валерий В.]

Алексей Ярков, ну смотрите. Простая таблица - компонент, в нем компоненты строки - в строках - компоненты ячейки. Все через v-for сделано. Данные реактивны получаю с vuex. Всё.
Тут принципиальный вопрос - как сделать приемлемым размер таблицы с сохранением реактивности механизмами Vue, либо же делать таблицу без Vue.
Предлагать показывать по 10 строк на страницу не надо.