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

Question

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

Answer

v-if

• The element and its children are destroyed and recreated on each toggle
• Lifecycle hooks (mounted, unmounted) are called each time
• Higher toggle cost — but zero cost when the condition is false (nothing in the DOM)
• Supports v-else-if and v-else chaining

<div v-if="isAdmin">Admin Panel</div>
<div v-else-if="isEditor">Editor Panel</div>
<div v-else>Read Only</div>

v-show

• The element is always in the DOM — only display: none is toggled
• Lifecycle hooks only run once (on initial mount)
• Lower toggle cost — but always has the initial render cost
• Does NOT support v-else

<div v-show="isMenuOpen">Menu Content</div>

When to Use Each