juniorVue.js
What is the purpose of the 'key' attribute in v-for?
Updated May 4, 2026
Short answer
The key attribute provides a unique identifier for Vue's Virtual DOM to track identity during list diffing.
Deep explanation
When Vue updates a list of elements rendered with v-for, it uses a 'patch-in-place' strategy by default. If the data order changes, instead of moving DOM elements, Vue patches each element at its current position. By providing a unique :key, you tell Vue how to map data items to specific DOM elements, allowing it to reorder elements efficiently and maintain component state (like focus or transitions).
Real-world example
Preventing an input field in a list from retaining the 'wrong' value when items are deleted or shuffled.
Common mistakes
- Using the array index as a key, which breaks if the list is sorted or filtered.
Follow-up questions
- What happens if you omit the key?