How to quickly filter a list in vue.js without unnecessary miscalculations?

Question

JavaScript

Hey! Help me please. Can't figure out what to do with it. Unless you write your own rendering bypassing vue.
The bottom line is that I make a chat with smooth scrolling (but that's not the point). To improve performance, I count the size and coordinates of each message. Further, with the help of properties, I filter those messages that currently fall into the chat window and use v-for to display only them. The only problem is that when the shift occurs and the necessary messages are displayed, all displayed messages are re-rendered (I want to note that the messages have a rather heavy structure and rendering them several times is quite expensive during scrolling, despite the fact that the rendering result is always the same ). It takes about 1ms (on a powerful computer) to render about 10 current messages and another 3ms to compare this and the old lists (THE ALTHOUGH there is basically nothing to compare, I already know for sure, that certain elements were removed or added, and all the rest remained unchanged, but vue still spends an exorbitant amount of time comparing the old and new list), which, under the conditions of 16ms per frame, is not at all comme il faut, although in fact the messages are all the same same, and all changes consist only in adding and removing elements of the list. I also want to note that there is a problem that 2 handlers are hung on each message, which also causes certain difficulties.
Now I’m thinking about trying to render messages in advance without the help of vue and save them as strings, and then just output them using v-html, although in this case it’s not very clear what to do with handlers.
Another option is to write your own rendering for messages in general and simply temporarily remove unnecessary elements from the DOM, and then restore them.
But still I would like to solve the problem by more civilian means. It would be ideal if I could implement the function of updating the DOM tree for this list myself ... All that is essentially needed is to render the entire list once, and then just hide and add back the necessary elements (the logic is very simple and does not require deep DOM tree comparisons...)

Answer 1

I skimmed through the comments and didn't see a suggestion to use the v-once directive.
https://ru.vuejs.org/v2/api/#v-once