Is this a re-rendering bug?

[leizha]

I created a simple test in the playground. It creates 4 buttons.

Clicking any button removes it from the list. Note that I added console.log so I know when it renders. Here is the tricky part:

• clicking button 4 doesn't re-render other buttons
• clicking button 1 re-renders all other 3 buttons.
  Apparently removing an element from the middle of the array triggers re-render of all the subsequent elements. Is this expected? This can be a performance hit when the array is very large.

[LinusBorg]

This is not a bug. Vue uses a virtual DOM. in order to diff the old list and the new list and decide which DOM elements to re-use and which to update, vnodes have to be created for all items in the list. But Vue will only change the minimum amount of DOM nodes necessary.

This can have an impact on performance in very large lists, yes. That's generally one of the downsides of virtual DOM implementations used by Vue or React.

It will perform better in upcomin Vapor mode.