Key attribute and why it matters in Vue - Step-by-Step Execution

Concept Flow - Key attribute and why it matters

Render List

↓

Create Elements for Items

↓

Assign Key Attribute

↓

Vue Tracks Elements by Key

↓

Detect Changes in List

↓

Efficiently Update DOM

↓

Avoid Unnecessary Re-renders

Vue uses the key attribute to track list items uniquely, helping it update only changed elements efficiently.

Execution Sample

Vue

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </ul>
</template>

This code renders a list of items, each with a unique key based on item.id for efficient updates.

Execution Table

Step	Action	List Items	Key Assigned	DOM Update Behavior
1	Initial render	[{id:1,text:'A'},{id:2,text:'B'}]	Keys: 1, 2	Create 2 <li> elements
2	Update: Change text of id=2	[{id:1,text:'A'},{id:2,text:'C'}]	Keys: 1, 2	Update text of <li> with key=2 only
3	Add new item id=3	[{id:1,text:'A'},{id:2,text:'C'},{id:3,text:'D'}]	Keys: 1, 2, 3	Create new <li> for key=3
4	Remove item id=1	[{id:2,text:'C'},{id:3,text:'D'}]	Keys: 2, 3	Remove <li> with key=1
5	Reorder items	[{id:3,text:'D'},{id:2,text:'C'}]	Keys: 3, 2	Move <li> elements to new order
6	Exit	-	-	All updates done efficiently using keys

💡 All list changes tracked by keys, so Vue updates only affected DOM elements.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	Final
items	[{id:1,text:'A'},{id:2,text:'B'}]	[{id:1,text:'A'},{id:2,text:'C'}]	[{id:1,text:'A'},{id:2,text:'C'},{id:3,text:'D'}]	[{id:2,text:'C'},{id:3,text:'D'}]	[{id:3,text:'D'},{id:2,text:'C'}]	[{id:3,text:'D'},{id:2,text:'C'}]	[{id:3,text:'D'},{id:2,text:'C'}]

Key Moments - 2 Insights

Why do we need to add a unique key to each item in a v-for list?

Vue uses the key to identify each element uniquely, so it can update only the changed items instead of re-rendering the whole list. See execution_table steps 2 and 3 where only affected items update.

What happens if keys are missing or not unique?

Vue may reuse or reorder DOM elements incorrectly, causing bugs or inefficient updates. The execution_table shows how keys guide correct DOM updates.

Visual Quiz - 3 Questions

Look at the execution_table at step 3. What DOM action happens when a new item with id=3 is added?

A Update text of existing <li>

B Remove an <li> element

C Create new <li> element for key=3

D No DOM change

💡 Hint

Check the 'DOM Update Behavior' column at step 3 in execution_table.

At which step does Vue remove an item from the DOM?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look for 'Remove

' in the 'DOM Update Behavior' column in execution_table.

If keys were not used, how would the DOM update behave when reordering items at step 5?

A Vue would move elements efficiently

B Vue would recreate all <li> elements

C Vue would ignore the reorder

D Vue would only update text

💡 Hint

Refer to key_moments about why keys matter for efficient updates.

Concept Snapshot

Vue's key attribute uniquely identifies list items.
It helps Vue track which items changed.
This enables efficient DOM updates.
Without keys, Vue may reuse wrong elements.
Always use unique keys in v-for lists.

Full Transcript

In Vue, when rendering lists with v-for, the key attribute is used to uniquely identify each item. This helps Vue know which items changed, were added, or removed. When the list updates, Vue uses keys to update only the affected DOM elements, making updates efficient and avoiding bugs. If keys are missing or not unique, Vue may reuse or reorder elements incorrectly, causing unexpected behavior. The execution table shows how Vue creates, updates, moves, and removes list items by tracking keys step-by-step.