What happens if you use v-for without a key?
Using v-for without a key is a common mistake that leads to unpredictable interface behavior. Vue lets you skip the key, but doing so is suboptimal and potentially dangerous.
Here is what actually happens.
The main point: Vue will use an in-place patching strategy
Without a key, Vue cannot correctly match list items, so it will:
update existing DOM elements "in place",
replacing their content instead of creating/removing the right elements.
What does this lead to?
1. Incorrect DOM updates
Vue will think the old element equals the new element, and will just update its text, but leave:
- focus state
- internal components
- transition effects
- local state of child components
This can cause very strange bugs.
2. DOM shuffling
Example:
<li v-for="item in items">
<input v-model="item.value">
</li>If items is reordered:
- input field values stay with the old DOM elements
- while the text updates to the new data
The result -> a mismatch between data and UI.
3. Loss of correct component behavior in lists
If you render components:
<UserCard v-for="user in users" :user="user" />and do not specify key, Vue will:
- reuse the wrong component
- leave the old props on the new component
- not call the correct lifecycle hooks
4. List animations (transition-group) will not work
Without keys, Vue cannot track:
- which elements were added
- which were removed
- which were moved
And the animation will "break".
An example where everything breaks
<div id="app">
<div v-for="n in numbers">
<input v-model="n.value">
</div>
</div>If the elements are reordered:
this.numbers.reverse();The text the user typed gets mixed up.
Why is a key needed?
A key is a unique identifier that helps Vue understand:
- which element was just added
- which was removed
- which was simply changed
In other words, key is the DOM element's "passport".
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.