Why is the key attribute important in v-for?
Assesses fundamental understanding of Vue.js conventions, runtime behavior, and memory/performance considerations.
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
The key gives each rendered item a stable identity so Vue can match old and new nodes during patching. Without a key, Vue uses an in-place patch strategy and reuses DOM nodes by index, which can cause wrong component state, broken input focus or incorrect animations when the list is reordered, filtered or has an item inserted in the middle.
With a unique key, Vue can move, add and remove the correct nodes. Use a stable unique value such as a database id, never the array index, because the index changes when the list changes and defeats the purpose.
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
Keys must be unique among siblings and are not exposed as a prop. For simple static lists that never reorder, an index key is acceptable but still a smell. In TransitionGroup, keys are required for correct move animations.
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.