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.

Practice

1. What is the main difference between v-if and v-show in Vue?

easy

A. v-if adds/removes elements from the DOM; v-show toggles visibility with CSS.

B. v-if toggles visibility with CSS; v-show adds/removes elements from the DOM.

C. v-if and v-show both remove elements from the DOM but in different ways.

D. v-if only works on components; v-show only works on HTML elements.

Solution

1. Step 1: Understand v-if behavior

   v-if conditionally adds or removes elements from the DOM based on the condition.

2. Step 2: Understand v-show behavior

   v-show keeps the element in the DOM but toggles its visibility using CSS display property.

3. Final Answer:

   v-if adds/removes elements from the DOM; v-show toggles visibility with CSS. -> Option A

4. Quick Check:

   v-if = DOM add/remove, v-show = CSS toggle [OK]

Hint: Remember: v-if changes DOM, v-show changes CSS [OK]

Common Mistakes:

• Thinking v-show removes elements from DOM
• Confusing which directive controls DOM vs CSS
• Assuming both behave the same way

2. Which of the following is the correct syntax to use v-show in a Vue template?

easy

A. <div v-show='isVisible'>Content</div>

B. <div v-show:isVisible>Content</div>

C. <div v-show:='isVisible'>Content</div>

D. <div v-show(isVisible)>Content</div>

Solution

1. Step 1: Recall Vue directive syntax

   Vue directives use the format v-directive='expression' without colons or parentheses.

2. Step 2: Check each option

   <div v-show='isVisible'>Content</div> uses correct syntax: v-show='isVisible'. Others misuse colons or parentheses.

3. Final Answer:

   <div v-show='isVisible'>Content</div> -> Option A

4. Quick Check:

   Directive syntax = v-show='condition' [OK]

Hint: Vue directives use = with quotes, no colons or parentheses [OK]

Common Mistakes:

• Using colon instead of equal sign
• Adding parentheses around condition
• Omitting quotes around the expression

3. Given the Vue template:

<template>
  <div>
    <p v-if='show'>Hello</p>
    <p v-show='show'>World</p>
  </div>
</template>

and show is initially false, what will be rendered in the DOM?

medium

A. No <p> elements are in the DOM.

B. Only <p>World</p> is in the DOM but hidden.

C. Both <p>Hello</p> and <p>World</p> are visible.

D. Only <p>Hello</p> is in the DOM but hidden.

Solution

1. Step 1: Analyze v-if='show' with show = false

   v-if removes the element from the DOM if the condition is false, so <p>Hello</p> is not in the DOM.

2. Step 2: Analyze v-show='show' with show = false

   v-show keeps the element in the DOM but hides it with CSS, so <p>World</p> is present but not visible.

3. Final Answer:

   Only <p>World</p> is in the DOM but hidden. -> Option B

4. Quick Check:

   v-if=false removes, v-show=false hides [OK]

Hint: v-if=false removes element; v-show=false hides it [OK]

Common Mistakes:

• Thinking v-show removes element
• Assuming both elements are visible
• Confusing which element is hidden or removed

4. Consider this Vue snippet:

<div v-if='isVisible'>Visible</div>
<div v-show='isVisible'>Also Visible</div>

If isVisible is undefined, what is the problem and how to fix it?

medium

A. Both elements will show; fix by initializing isVisible to true.

B. No problem; Vue treats undefined as true.

C. Both elements will not render; fix by initializing isVisible to false.

D. v-if element won't render; v-show element is in the DOM but hidden; fix by defining isVisible as a boolean.

Solution

1. Step 1: Understand how undefined affects v-if and v-show

   v-if treats undefined as false, so the element won't render. v-show treats undefined as false and keeps the element in the DOM but hides it using CSS display: none.

2. Step 2: Fix by defining isVisible properly

   Initialize isVisible in data or state as a boolean (true or false) to avoid unexpected behavior.

3. Final Answer:

   v-if element won't render; v-show element is in the DOM but hidden; fix by defining isVisible as a boolean. -> Option D

4. Quick Check:

   Undefined treated as false; define boolean to fix [OK]

Hint: Always initialize booleans used in v-if and v-show [OK]

Common Mistakes:

• Assuming undefined is true
• Not initializing reactive data
• Expecting same behavior from v-if and v-show

5. You want to toggle a dropdown menu in Vue that is hidden by default and shown only when a button is clicked. The menu content is complex and heavy to render. Which directive should you use and why?

hard

A. Use both v-if and v-show together for best performance.

B. Use v-show because it toggles visibility quickly without removing from DOM.

C. Use v-if because it avoids rendering heavy content until needed.

D. Use neither; control visibility with CSS classes manually.

Solution

1. Step 1: Consider rendering cost of heavy content

   Heavy content should not be rendered until needed to save resources and improve performance.

2. Step 2: Choose directive based on toggle frequency and cost

   v-if adds/removes elements, so it delays rendering until shown, ideal for heavy content toggled infrequently.

3. Final Answer:

   Use v-if because it avoids rendering heavy content until needed. -> Option C

4. Quick Check:

   Heavy content + infrequent toggle = v-if [OK]

Hint: Heavy content? Use v-if to delay rendering [OK]

Common Mistakes:

• Using v-show which renders heavy content always
• Combining both directives unnecessarily
• Ignoring performance impact of rendering