Key attribute and why it matters in Vue - Performance & Optimization

Performance: Key attribute and why it matters

HIGH IMPACT

This affects how Vue efficiently updates the DOM during re-rendering, impacting interaction responsiveness and visual stability.

Rendering a list of items with dynamic updates

Vue

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

Using a unique stable key like item.id lets Vue track each element precisely, minimizing DOM operations and preventing layout shifts.

📈 Performance GainSingle reflow per update, reduces repaints, improves INP and CLS scores.

Rendering a list of items with dynamic updates

Vue

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index"> {{ item.name }} </li>
  </ul>
</template>

Using the array index as key causes Vue to reuse DOM nodes incorrectly when items change order or are added/removed, triggering unnecessary re-renders and layout shifts.

📉 Performance CostTriggers multiple reflows and repaints on list updates, increasing INP and causing CLS.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Using index as key	Many node removals and insertions	Multiple reflows per update	High paint cost due to layout shifts	[X] Bad
Using unique id as key	Minimal node updates	Single reflow per update	Low paint cost, stable layout	[OK] Good

Rendering Pipeline

Vue uses the key attribute to map virtual DOM nodes to real DOM elements. When keys are unique and stable, Vue can patch only changed nodes, avoiding full re-renders.

→Virtual DOM Diffing

→DOM Update

→Layout

→Paint

⚠️ BottleneckLayout stage due to unnecessary DOM node removals and insertions when keys are unstable.

Core Web Vital Affected

INP, CLS

This affects how Vue efficiently updates the DOM during re-rendering, impacting interaction responsiveness and visual stability.

Optimization Tips

1Always use unique, stable keys for list items in Vue.

2Avoid using array index as key when list order can change.

3Proper keys reduce reflows, repaints, and layout shifts improving INP and CLS.

Performance Quiz - 3 Questions

Why should you avoid using array index as a key in Vue lists?

A Because it makes the code shorter and harder to read

B Because Vue does not support index as key

C Because it can cause unnecessary DOM updates and layout shifts when list items change order

D Because it increases the bundle size

DevTools: Performance

How to check: Record a performance profile while updating the list. Look for excessive Layout and Recalculate Style events.

What to look for: High number of Layout events and long scripting times indicate poor key usage causing reflows and repaints.

Practice

1. Why is the key attribute important when rendering lists in Vue?

easy

A. It helps Vue track each item uniquely to update the list efficiently.

B. It changes the style of list items automatically.

C. It disables reactivity for list items.

D. It sorts the list items alphabetically.

Solution

1. Step 1: Understand Vue's list rendering

   Vue uses the key attribute to identify each item uniquely when rendering lists.

2. Step 2: Recognize the role of key

   This unique key helps Vue efficiently update only changed items instead of re-rendering the whole list.

3. Final Answer:

   It helps Vue track each item uniquely to update the list efficiently. -> Option A

4. Quick Check:

   Unique keys improve list update efficiency = A [OK]

Hint: Keys uniquely identify list items for efficient updates [OK]

Common Mistakes:

• Thinking keys change styles automatically
• Believing keys disable reactivity
• Assuming keys sort the list

2. Which of the following is the correct way to use the key attribute in a Vue v-for loop?

easy

A. <li v-for="item in items" :key="index">{{ item }}</li>

B. <li v-for="item in items" :key="items">{{ item }}</li>

C. <li v-for="item in items" key="item">{{ item }}</li>

D. <li v-for="item in items" :key="item.id">{{ item.name }}</li>

Solution

1. Step 1: Check the key binding syntax

   The key attribute should be bound with : to a unique and stable value, like item.id.

2. Step 2: Identify the correct unique key usage

   <li v-for="item in items" :key="item.id">{{ item.name }}</li> uses :key="item.id", which is correct and stable for each item.

3. Final Answer:

   <li v-for="item in items" :key="item.id">{{ item.name }}</li> -> Option D

4. Quick Check:

   Use :key with unique id = D [OK]

Hint: Use :key with a unique item property, not index [OK]

Common Mistakes:

• Using index as key which can cause bugs
• Not binding key with : causing string literal
• Using the whole array as key

3. Given the code below, what will be the rendered list after the items array changes?

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

<script setup>
import { ref } from 'vue'
const items = ref([
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
])

// Later update
items.value = [
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' },
  { id: 4, name: 'Date' }
]
</script>

medium

A. BananaCherryDate

B. AppleBananaCherry

C. DateBananaCherry

D. BananaDateCherry

Solution

1. Step 1: Understand the key-based update

   Vue uses the key attribute to match existing DOM elements with new data by id.

2. Step 2: Match items by id and update list

   Items with id 2 and 3 remain, item with id 1 is removed, and item with id 4 is added at the end.

3. Final Answer:

   <ul><li>Banana</li><li>Cherry</li><li>Date</li></ul> -> Option A

4. Quick Check:

   Keys track items by id, so list updates correctly = C [OK]

Hint: Keys keep items matched by id, so order updates correctly [OK]

Common Mistakes:

• Assuming old items stay without keys
• Thinking new items replace all old items
• Ignoring the order change in the array

4. What is the problem with this Vue code snippet?

<ul>
  <li v-for="(item, index) in items" :key="index">{{ item.name }}</li>
</ul>

Assuming items can be reordered or changed dynamically.

medium

A. The key attribute is missing a colon for binding.

B. Using index as key can cause incorrect DOM updates when list changes.

C. The v-for syntax is invalid without parentheses.

D. The item.name interpolation is incorrect.

Solution

1. Step 1: Identify the key usage problem

   Using the loop index as key is unstable when the list changes order or items are added/removed.

2. Step 2: Understand the impact on DOM updates

   This causes Vue to reuse DOM elements incorrectly, leading to bugs like wrong item content or lost input focus.

3. Final Answer:

   Using index as key can cause incorrect DOM updates when list changes. -> Option B

4. Quick Check:

   Index keys cause update bugs = B [OK]

Hint: Never use index as key if list can reorder [OK]

Common Mistakes:

• Thinking index keys are always safe
• Missing colon on key attribute
• Confusing v-for syntax errors

5. You have a list of users where some users share the same name but have unique IDs. You want to render this list with Vue's v-for. Which key choice is best to avoid rendering bugs and improve performance?

hard

A. Use the user's index in the array as the key.

B. Use the user's name as the key.

C. Use the user's unique ID as the key.

D. Do not use any key attribute.

Solution

1. Step 1: Analyze uniqueness requirement for keys

   Keys must be unique and stable for each item to help Vue track them correctly.

2. Step 2: Evaluate each option

   Using the unique ID is best because it is unique and stable. Names are not unique if duplicated. Index is unstable if the list changes. No key causes inefficient updates.

3. Final Answer:

   Use the user's unique ID as the key. -> Option C

4. Quick Check:

   Unique stable ID keys prevent bugs = A [OK]

Hint: Always pick unique stable IDs as keys, never names or indexes [OK]

Common Mistakes:

• Using non-unique keys like names
• Using index keys causing bugs on reorder
• Skipping keys causing slow updates