I've investigated the problem on a VueJS app which rendered a live-updated table-like DOM with thousands of rows, and was quite slow in rendering and scrolling, especially on mobile. For my use case the easiest solution was to render the first X elements, on-the-fly render the next elements as you scrolled down and disable the VueJS watching and reactivity logic for the DOM elements outside the viewport, so that when you scroll back up the elements are still there and you do not spend too much time recreating them (the DOM is slow).
I had to use unexported, private VueJS methods, I raised an issue on Github asking them to provide public hooks but it was declined.
This method works when you have a big but not huge list. In the latter case the bottleneck is not your JS framework but the browser, so yeah, you should delete and create DOM elements on the fly.
(I'd share my code but it's on a commercial app, and a huge hack that I'm surprised I've managed to make work.)
For the GP, the technique itself is older [4][5][6][7], but with this new crop of component-oriented frameworks I can see the value of a dedicated component.
Awesome, thank you, that looks like what I'm asking about, I'll check it out. If I have a straight table, I tend to reach for SlickGrid, but for more free-formatted content, this looks much more useful.
I've investigated the problem on a VueJS app which rendered a live-updated table-like DOM with thousands of rows, and was quite slow in rendering and scrolling, especially on mobile. For my use case the easiest solution was to render the first X elements, on-the-fly render the next elements as you scrolled down and disable the VueJS watching and reactivity logic for the DOM elements outside the viewport, so that when you scroll back up the elements are still there and you do not spend too much time recreating them (the DOM is slow).
I had to use unexported, private VueJS methods, I raised an issue on Github asking them to provide public hooks but it was declined.
This method works when you have a big but not huge list. In the latter case the bottleneck is not your JS framework but the browser, so yeah, you should delete and create DOM elements on the fly.
(I'd share my code but it's on a commercial app, and a huge hack that I'm surprised I've managed to make work.)