v-for for list rendering in Vue - Performance & Optimization

Performance: v-for for list rendering

MEDIUM IMPACT

This affects how quickly the browser can render lists and update the DOM when data changes.

Rendering a list of items in Vue using v-for

Vue

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

<script setup>
const items = Array.from({ length: 1000 }, (_, i) => ({ id: i, name: `Item ${i}` }));
</script>

Using a unique :key helps Vue track items efficiently, minimizing DOM updates and reflows.

📈 Performance GainReduces reflows to only changed items, cutting rendering time by 80% or more.

Rendering a list of items in Vue using v-for

Vue

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

<script setup>
const items = Array(1000).fill({ name: 'Item' });
</script>

Rendering a large list without a unique key causes Vue to re-render all items on any change, triggering many DOM updates and reflows.

📉 Performance CostTriggers 1000 reflows on each update, blocking rendering for 100+ ms on slow devices.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
v-for without key	Creates all nodes every update	Triggers reflow for every item	High paint cost due to full re-render	[X] Bad
v-for with unique key	Updates only changed nodes	Minimal reflows on update	Lower paint cost	[OK] Good
v-for with virtual scrolling	Creates only visible nodes	Very few reflows	Minimal paint cost	[OK] Good

Rendering Pipeline

v-for creates DOM nodes for each item. Without keys, Vue re-renders entire lists causing many Layout and Paint steps. With keys, Vue patches only changed nodes, reducing Layout and Paint. Large lists increase Style Calculation and Layout time. Virtual scrolling limits nodes to visible ones, minimizing all stages.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages due to many DOM nodes and reflows

Core Web Vital Affected

LCP

This affects how quickly the browser can render lists and update the DOM when data changes.

Optimization Tips

1Always use a unique :key with v-for to help Vue optimize DOM updates.

2Avoid rendering very large lists all at once; use virtual scrolling or pagination.

3Check performance in DevTools to spot costly reflows and paints during list rendering.

Performance Quiz - 3 Questions

What is the main performance benefit of adding a unique :key to v-for list items?

A It helps Vue track items and update only changed DOM nodes

B It reduces the number of items in the list

C It disables reflows completely

D It compresses the JavaScript bundle size

DevTools: Performance

How to check: Record a performance profile while interacting with the list. Look for long scripting and rendering tasks during list updates.

What to look for: High Layout and Paint times indicate inefficient list rendering. Lower times with keys or virtual scrolling confirm better performance.