Как во vue.js сделать быструю фильтрацию списка без лишних просчётов?

Привет! Помогите, пожалуйста. Не выходит сообразить что можно сделать с этим. Разве что написать собственный рендеринг в обход vue.

Суть в том, что я делаю чат с плавным скроллингом (но не в этом суть). Для увеличения производительности я считаю размер и координаты каждого сообщения. Дальше с помощью выч. свойства фильтрую те сообщения, которые на данный момент попадают в окно чата и с помощью v-for вывожу лишь их. Проблема лишь в том, что когда происходит смещение и выводятся нужные сообщения - заново происходит рендеринг всех отображаемых сообщений (хочу заметить то что сообщения имеют довольно тяжёлую структуру и рендерить их по несколько раз довольно накладно во время скроллинга, при том, что результат рендеринга всегда одинаковый). На то чтобы отрендерить примерно 10 текущих сообщений уходит (на мощном компьютере) около 1мс и ещё 3мс уходит на то чтобы сравнить этот и старый списки (ХОТЯ сравнивать в принципе нечего, я и так уже точно знаю, что удалились или добавились определённые элементы, а все остальные остались без изменения, но vue всё равно тратит на сравнение старого и нового списка непомерно много времени), что в условиях 16мс на один кадр ну совсем не комильфо, хотя по сути сообщения все одни и те же, а все изменения заключаются лишь в добавление и удаление элементов списка. Так же хочу заметить что есть проблема, что на каждое сообщение вешается 2 обработчика, что тоже вызывает определённые сложности.

Вот думаю сейчас попробовать рендерить сообщения заранее без помощи vue и сохранять в виде строк, а дальше просто выводить с помощью v-html, хотя в таком случае не очень понятно что делать с обработчиками.

Ещё один вариант - написать вообще полностью свой рендеринг для сообщений и просто временно удалять из DOM ненужные элементы, а потом восстанавливать их.

Но всё же хотелось бы решить проблему более штатскими средствами. Было бы идеально если бы я мог сам реализовать функцию обновления DOM дерева для данного списка... Всё что по сути нужно, так это один раз отрендерить весь список, а дальше просто скрывать и добавлять обратно нужные элементы (логика очень простая и не требует глубокого сравнения DOM деревьев...)
  • Вопрос задан
  • 1022 просмотра
Пригласить эксперта
Ответы на вопрос 1
gennadiy403
@gennadiy403
Бегло просмотрел комменты и не увидел предложения использовать директиву v-once.

Однократно рендерит элемент или компонент. При повторном рендеринге он, а также все его потомки, рассматриваются как статический контент и пропускаются. Это поможет увеличить производительность обновлений.
https://ru.vuejs.org/v2/api/#v-once
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы