v-for with objects in Vue - Performance & Optimization

Performance: v-for with objects

MEDIUM IMPACT

This affects rendering speed and DOM update performance when looping over object properties in Vue templates.

Rendering a list of items from an object in Vue

Vue

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

Using a stable key (the object property name) lets Vue efficiently patch only changed nodes.

📈 Performance GainReduces reflows to only changed items, improving update speed and interaction responsiveness.

Rendering a list of items from an object in Vue

Vue

<template>
  <ul>
    <li v-for="(value, key) in items" :key="Math.random()">
      {{ key }}: {{ value }}
    </li>
  </ul>
</template>

Using a random key causes Vue to recreate all DOM nodes on each update, triggering full reflows.

📉 Performance CostTriggers full reflow and repaint on every update, blocking rendering for tens of milliseconds on large lists.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
v-for with random keys	Full node replacement on each update	Triggers full reflow per update	High paint cost due to many node changes	[X] Bad
v-for with stable keys (object keys)	Only changed nodes updated	Minimal reflows limited to changed items	Lower paint cost with fewer DOM changes	[OK] Good

Rendering Pipeline

Vue compiles the v-for directive into a loop that creates DOM nodes for each object property. The key attribute helps Vue track nodes between updates to minimize DOM changes.

→Virtual DOM Diffing

→DOM Update

→Layout

→Paint

⚠️ BottleneckDOM Update stage is most expensive when keys are unstable causing full node replacement.

Core Web Vital Affected

INP

This affects rendering speed and DOM update performance when looping over object properties in Vue templates.

Optimization Tips

1Always use stable keys from object properties in v-for loops.

2Avoid generating keys dynamically like Math.random() or index.

3Large objects rendered with v-for should be paginated or virtualized to reduce DOM cost.

Performance Quiz - 3 Questions

What is the main performance benefit of using stable keys in v-for loops over objects?

A It triggers more reflows

B It increases the bundle size

C Vue can patch only changed nodes, reducing DOM updates

D It disables Vue reactivity

DevTools: Performance

How to check: Record a performance profile while updating the object data. Look for long scripting and layout times related to DOM updates.

What to look for: High layout and paint times indicate inefficient DOM updates. Stable keys reduce these times.