Entrambi visualizzano condizionalmente un elemento, ma lo fanno in modo diverso — v-if aggiunge/rimuove l'elemento dal DOM; v-show lo mantiene nel DOM e attiva/disattiva il suo 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 ha un costo di commutazione più alto (crea/distrugge elementi e i loro componenti, esegue hook del ciclo di vita ogni volta) ma zero costo quando la condizione è falsa (nulla viene renderizzato).v-show ha un costo iniziale più alto (sempre renderizzato, anche se nascosto) ma la commutazione è economica (solo un cambiamento 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 supporta catene v-else-if/v-else; v-show no (commuta solo un elemento).
v-show non funziona sui wrapper <template> (non c'è alcun elemento su cui impostare display); v-if sì.
Scegliere quello giusto è una vera decisione prestazionale: v-show per cose commutate frequentemente (il DOM rimane, la commutazione è economica), v-if per cose condizionali/rare o costose (non renderizzarle finché non servono).
Scegliere male — ad es. v-show su contenuti pesanti che di solito sono nascosti — spreca il lavoro di renderizzazione.