Czat / wyświetlanie dużej ilości rekordów

Cześć,

Tworzę sobie chat w vue. Ale właśnie odkryłem, że gdy zaczynam mieć z 100-200 wiadomości to wydajność znacznie spada. Próbowałem użyć https://github.com/Akryum/vue-virtual-scroller ale jakoś dziwnie to działa. Scroll czasem trochę przeskakuje a i mam wrażenie, że przy przewijaniu wiadomości czasem są lekkie przycięcia.

Discord ma to jakoś fajnie zrobione. Wszystko mi działa płynnie nawet na wersji przeglądarkowej. Zauważyłem, że nawet jak się przegląda starsze wiadomości, to one się nie doczytują i nie można za jednym razem zescrollować na ostatnie wiadomości, tylko się idzie do coraz nowszych. Mają to jakoś tak chyba zrobione, że jest np. 50 wiadomości wstecz i do przodu i zależnie od scrollowania, wiadomości się podmieniają.

Jak można zrobić coś podobnego lub jak rozwiązać ten problem?

Wydajność spada, ponieważ powołujesz do życia komponent dla każdej wiadomości, mimo tego, że większość jest niewidoczna na ekranie. Zatem na logikę, wystarczy zrobić tak aby powołać do życia tylko tyle komponentów wiadomości ile jest widocznych + jakiś zapas. Następnie trzeba zrobić funkcję, która będzie sprawdzała które wiadomości powinny być widoczne i podmieniała zawartość komponentów odpowiednimi danymi. Oczywiście już ktoś rozwiązał ten problem i na 100% znajdziesz gotowy komponent który to realizuje dla Vue, React, czy do czego tam sobie wymyślisz. Szukaj pod hasłem "recycler view".