Does not setting the key cause any problems, except for the performance impact?

[dddssw]

This default mode is efficient, but only suitable when your list render output does not rely on child component state or temporary DOM state (e.g. form input values).

This is the original words from the official website, but I don't understand when it will cause an error. Can you give an example?

[skirtles-code]

The main purpose of a key is to pair up VNodes from one rendering to the next. This is to ensure that any component instances or DOM nodes associated with those VNodes are paired up correctly.

If the component instances and DOM nodes are all stateless then this likely won't cause a problem beyond the overhead of unnecessary extra updates, but if they have state then you'll end up with that state being in the wrong node.

Here's an example:

• Playground

When removing an item from the array, Vue doesn't keep track of exactly which items were removed, it just triggers a re-render. Without a key, the re-render assumes that the last item was removed. This incorrectly pairs up the child component instances and their corresponding elements.

The num ref is local state, which allows you to see this problem. When an item is removed from the array the wrong child is removed, leading to the wrong value being rendered in the <input>.

The example also includes a transition effect with a yellow background. This is intended to show DOM 'state'. The transition doesn't work correctly without the key because the wrong element is being removed.