v-for with v-if precedence in Vue - Performance & Optimization

Performance: v-for with v-if precedence

MEDIUM IMPACT

This affects rendering speed and responsiveness by controlling how many DOM nodes Vue creates and updates during list rendering.

Rendering a filtered list conditionally

Vue

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

<script setup>
import { computed } from 'vue'
const filteredItems = computed(() => items.filter(item => item.visible))
</script>

Filtering items before rendering reduces DOM nodes and avoids repeated v-if checks during rendering.

📈 Performance Gainsingle reflow and paint for filtered list, faster initial render and updates

Rendering a filtered list conditionally

Vue

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

Vue runs v-if check on every item after rendering starts, creating unnecessary DOM nodes and wasting CPU.

📉 Performance Costtriggers N reflows and repaints where N = number of items, blocking rendering longer

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
v-for with v-if inside	Creates all nodes then removes some	N reflows for N items	High paint cost due to node removal	[X] Bad
v-for on pre-filtered list	Creates only needed nodes	Single reflow	Low paint cost	[OK] Good

Rendering Pipeline

Vue first processes v-for to create DOM nodes for all items, then applies v-if to each node, causing extra layout and paint work.

→Template Compilation

→Virtual DOM Patch

→Layout

→Paint

⚠️ BottleneckLayout stage due to many unnecessary DOM nodes created then removed

Core Web Vital Affected

INP

This affects rendering speed and responsiveness by controlling how many DOM nodes Vue creates and updates during list rendering.

Optimization Tips

1Avoid using v-if directly inside v-for loops.

2Filter your data before rendering lists with v-for.

3Use computed properties to prepare filtered lists for better performance.

Performance Quiz - 3 Questions

What is the main performance issue with using v-if inside a v-for loop?

A Vue skips rendering all nodes, so no DOM nodes are created.

B v-if inside v-for delays JavaScript execution but not rendering.

C Vue creates all DOM nodes first, then removes those failing v-if, causing extra layout and paint work.

D v-if inside v-for reduces bundle size significantly.

DevTools: Performance

How to check: Record a performance profile while loading the component, then look for long scripting and layout tasks related to list rendering.

What to look for: Look for repeated layout and paint events caused by many DOM nodes being created and removed, indicating v-if inside v-for inefficiency.