What is the difference between v-if and v-show in Vue?
Learn how v-if and v-show differ in Vue: DOM removal vs CSS toggling, render cost, lifecycle impact, and when to use each for the best performance.
Expected Interview Answer
v-if conditionally creates or destroys the element in the DOM, while v-show always renders the element and only toggles its CSS display property.
Because v-if actually adds and removes nodes, it is lazy — the block is not rendered until the condition first becomes true, and toggling it re-runs mounting and unmounting including lifecycle hooks. v-show renders the element once and just flips display:none on and off, so toggling is cheap but the element (and its cost) always exists. Use v-if for conditions that rarely change and v-show for things toggled frequently.
- v-if has lower initial cost when the condition is false
- v-show has lower toggle cost for frequent switching
- v-if fully removes the element and its child components
- v-show keeps state and DOM alive between toggles
- v-if supports v-else / v-else-if chains
AI Mentor Explanation
v-if is like removing a substitute fielder from the ground entirely when not needed — they leave the field and must walk back on to play again. v-show is like a fielder who stays on the pitch but crouches out of the way; still there, still counted, just not active. Rarely-used players get sent off (v-if), constantly-rotating ones stay on (v-show).
Step-by-Step Explanation
Step 1
Pick the toggle frequency
If the element flips on and off often, lean toward v-show; if it changes rarely, use v-if.
Step 2
Weigh initial render cost
Use v-if when the block is expensive and usually hidden, since v-if skips rendering entirely until true.
Step 3
Consider lifecycle and state
Remember v-if re-mounts child components (resetting their state), while v-show preserves them.
Step 4
Use v-else where needed
Only v-if / v-else-if / v-else form conditional chains; v-show cannot be chained this way.
Step 5
Profile if unsure
For high-frequency UI like tabs or tooltips, measure — v-show usually wins on toggle performance.
What Interviewer Expects
- Knows v-if adds/removes DOM while v-show toggles CSS display
- Understands lazy rendering of v-if
- Explains lifecycle hook re-firing with v-if
- Can state when to choose each directive
- Mentions v-else / v-else-if only works with v-if
Common Mistakes
- Claiming both remove the element from the DOM
- Saying v-show is always faster without noting its render-always cost
- Forgetting that v-if resets child component state on each toggle
- Using v-if for something toggled many times per second
- Trying to pair v-else with v-show
Best Answer (HR Friendly)
“Both control whether something appears on screen. v-if actually removes the element when it is hidden, which is best for things that rarely change. v-show keeps the element there but hides it with CSS, which is faster when you toggle it a lot.”
Code Example
<template>
<!-- Removed from the DOM when false -->
<section v-if="isLoggedIn">Welcome back!</section>
<section v-else>Please log in</section>
<!-- Always in the DOM, toggled with display:none -->
<div v-show="panelOpen">Settings panel</div>
<button @click="panelOpen = !panelOpen">Toggle panel</button>
</template>
<script setup>
import { ref } from 'vue'
const isLoggedIn = ref(true)
const panelOpen = ref(false)
</script>Follow-up Questions
- Why does v-if re-fire mounted and unmounted hooks on toggle?
- Can you use v-show on a <template> element? Why or why not?
- How does using v-if with v-for on the same element behave, and why is it discouraged?
- Which directive better suits a modal that opens and closes constantly?
- How do transitions differ between v-if and v-show?
MCQ Practice
1. How does v-show hide an element?
v-show always renders the element and toggles the CSS display property between its value and none.
2. Which directive is lazy — not rendering its block until the condition is first true?
v-if does not render its block at all until the condition becomes true, making it lazy on initial render.
3. Which is generally better for an element toggled very frequently?
v-show only flips a CSS property on toggle, avoiding the mount/unmount cost that v-if incurs each time.
Flash Cards
What does v-if do when false? — It removes the element (and its child components) from the DOM entirely.
What does v-show do when false? — It keeps the element rendered and sets its CSS display to none.
Which directive is lazy? — v-if — it does not render its block until the condition is first true.
Which supports v-else? — Only v-if / v-else-if / v-else; v-show cannot be chained.