v-show vs v-if difference in Vue - Performance Comparison

Performance: v-show vs v-if difference

MEDIUM IMPACT

This concept affects how quickly elements appear or disappear on the page and how much work the browser does to update the DOM.

Toggling visibility of an element frequently

Vue

<template>
  <div v-show="isVisible">Content</div>
</template>
<script setup>
import { ref } from 'vue'
const isVisible = ref(true)
</script>

v-show only toggles CSS display property, avoiding DOM changes and layout recalculations.

📈 Performance GainSingle repaint per toggle, no reflow triggered

Toggling visibility of an element frequently

Vue

<template>
  <div v-if="isVisible">Content</div>
</template>
<script setup>
import { ref } from 'vue'
const isVisible = ref(true)
</script>

v-if adds or removes the element from the DOM each time, causing layout recalculations and reflows.

📉 Performance CostTriggers 1 reflow and 1 repaint every toggle

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
v-if toggle	Adds/removes nodes	1 reflow per toggle	1 paint per toggle	[X] Bad for frequent toggling
v-show toggle	No DOM changes	0 reflows	1 paint per toggle	[OK] Good for frequent toggling
v-if initial render hidden	No DOM nodes rendered	0 reflows	0 paint	[OK] Good for rare rendering
v-show initial render hidden	Nodes always in DOM	0 reflows	0 paint	[!] OK but increases DOM size

Rendering Pipeline

v-if adds or removes elements from the DOM, triggering style recalculation, layout, and paint. v-show toggles CSS display, triggering only paint without layout recalculation.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout stage is most expensive for v-if due to DOM changes

Core Web Vital Affected

INP

This concept affects how quickly elements appear or disappear on the page and how much work the browser does to update the DOM.

Optimization Tips

1Use v-if to avoid rendering elements until needed, reducing initial load.

2Use v-show to toggle visibility quickly without DOM changes or layout recalculations.

3Avoid v-show for large hidden content to keep DOM size small and improve load speed.

Performance Quiz - 3 Questions

Which directive causes the browser to add or remove elements from the DOM?

A v-bind

B v-show

C v-if

D v-on

DevTools: Performance

How to check: Record a performance profile while toggling visibility; observe layout and paint events in the flame chart.

What to look for: Frequent layout events indicate v-if toggling; paint-only events indicate v-show toggling.