Inconsistent element reuse in v-for when using key

[mzgajner]

Vue.js version

2.1.10

Reproduction Link

JSFiddle

Steps to reproduce

1. Start with an array of items and slice a subset from that array.
2. Using v-for, loop through that subset in a template and render some elements. Make sure you set :key props on those elements and pass consistent IDs to track which element belongs to which item.
3. Change the subset by changing the position where it is sliced from the array of items.

What is Expected?

If I understand how :key is supposed to work, items should be matched to elements based on their unique id. When items are updated (some added/removed, some left intact), the ones that remain should stay in the same elements for animation purposes.

What is actually happening?

The reuse of elements is inconsistent. In the demo fiddle, when clicking up, a transition is triggered, which means the items remained in the same elements as expected. But clicking down instantly changes all values, which hints that new elements were created.

[yyx990803]

They are not re-created, but moved by insertBefore. And if an element with transition is moved during the transition the transition is interrupted. The key ensures the elements end up in the correct position in the DOM when all manipulations are done, but doesn't guarantee they are never moved in the process. This is what is necessary to ensure a concise algorithm with consistent results. This may be improved in the future, but it's not something very critical (same issue with #4362).

And for your use case, why not just use <transition-group>?

[mzgajner]

A, so I misunderstood what exactly key does. I wasn't aware of <transition-group>, seems to solve the issue, thanks a lot!