Ambele afișează condiționat un element, dar o fac în moduri diferite — v-if adaugă/elimină elementul din DOM; v-show îl păstrează în DOM și comută 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 are cost de comutare mai ridicat (creează/distruge elemente și componentele lor, rulează lifecycle hooks de fiecare dată), dar cost zero când condiția este false (nimic nu este randat).v-show are cost inițial mai ridicat (întotdeauna randează, chiar dacă ascuns), dar comutare ieftină (doar o schimbare CSS).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 suportă lanțuri v-else-if/v-else; v-show nu (doar comută un element).
v-show nu funcționează pe wrapper-e <template> (nu este element pe care să setezi display); v-if funcționează.
A alege pe cea corectă este o decizie reală de performanță: v-show pentru lucruri comutate frecvent (DOM rămâne, comutarea este ieftină), v-if pentru lucruri care sunt condiționale/rare sau costisitoare (nu le randa până nu sunt necesare).
A alege greșit — de exemplu, v-show pe conținut greu care este de obicei ascuns — risipește muncă de randare.