Beide tonen voorwaardelijk een element, maar doen dit op verschillende manieren — v-if voegt het element toe/verwijdert het uit de DOM; v-show houdt het in de DOM en toggle de CSS display.
<template>
<p v-if="isVisible">Rendered only when true (removed from DOM when false)</p>
<p v-show="isVisible">Always in the DOM; just display:none when false</p>
</template>
<!-- v-if="false" → the element doesn't exist at all -->
<!-- (nothing in the DOM) -->
<!-- v-show="false" → the element exists but is hidden -->
<p style="display: none">...</p>
v-if heeft hogere toggle-kosten (het maakt/verwijdert elementen en hun componenten, voert lifecycle hooks uit telkens), maar nul kosten wanneer de voorwaarde false is (niets weergegeven).v-show heeft hogere initiële kosten (altijd weergegeven, zelfs als verborgen), maar goedkoop toggelen (alleen een CSS-wijziging).Toggles often (tabs, dropdowns) → v-show (cheap to flip)
Rarely changes / may never render → v-if (skip rendering entirely)
Expensive content rarely shown → v-if (don't pay to build it)
<template>
<p v-if="status === 'loading'">Loading...</p>
<p v-else-if="status === 'error'">Error!</p>
<p v-else>Done</p>
</template>
v-if ondersteunt v-else-if/v-else-ketens; v-show niet (het toggle alleen een element).
v-show werkt niet op <template>-wrappers (er is geen element om display in te stellen); v-if wel.
Het kiezen van de juiste is een echte prestatievraag: v-show voor dingen die frequent worden getoggeld (de DOM blijft, flipping is goedkoop), v-if voor dingen die voorwaardelijk/zeldzaam of duur zijn (render ze niet totdat nodig).
De verkeerde keuze maken — bijv. v-show op zware content die meestal verborgen is — verspilt renderwerk.