Removing first and last element in a list rendered component forces a complete re-rendering of all items

[rasmushaglund]

Version

2.5.2

Reproduction link

https://codepen.io/spenspazmer/pen/aLXGGY?editors=1011

Steps to reproduce

1.Create a v-for list with items
2.Inspect and observe the item elements
3.Trigger an action that shifts and pops the list
4.Observe

What is expected?

The items should be removed without re-rendering the item list.

What is actually happening?

The whole list is re-rendered.

---

Adding new elements works just as expected, just as triggering several pop or shift operations, doing a single list splice from the end or start. Performing a splice from the beginning and the end respectively triggers the same re-rendering problem.

[posva]

Duplicate of #4362

[rasmushaglund]

Well actually the real problem in my case isn't the performance loss of re-rendering per se, but the fact that focus is lost from elements that are removed and then re-added to the DOM. Just as #4362 I'm trying to use a virtual scroller, but can't navigate with the keyboard since the re-rendering removes focus. The only way I've found to go around this is to listen to the blur event and do a re-focus, but that introduces a significant delay and ruins the experience.

The alternative is to handle this in the DOM directly, but that kind of defeat the purpose of using Vue.

Should I in that case create a new issue that is a bit more specified? This is really important in order to create a usable virtual scroller with keyboard navigation.

[rasmushaglund]

Ping @posva

I've created an ugly hack that instead of using slice do a series of shift, unshift, push and pop divided into inside and outside of a nextTick. This is a very ugly hack (and not performant since it is divided in twice as many ticks as an ordinary slice) and I really do hope that this is not the recommended Vue-way. As I said above: I think this needs to be addressed in order to be able to create virtual scrollers with keyboard navigation.

Any thoughts?

[posva]

yeah, the other issue is there...
For your input's issue using a key should do the trick but I guess you ask for more help in the forum or the chat if you need it

[rasmushaglund]

I don't understand @posva, in the codepen repro above key was used, so I'm not sure how that would help. We can also see that the key attribute is used and working in the repro since the complete re-rendering only occurs under specific conditions.