Ambos muestran condicionalmente un elemento, pero lo hacen de forma diferente — v-if agrega/elimina el elemento del DOM; v-show lo mantiene en el DOM y alterna su 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 tiene costo de alternancia más alto (crea/destruye elementos y sus componentes, ejecuta hooks del ciclo de vida cada vez) pero cero costo cuando la condición es falsa (nada renderizado).v-show tiene costo inicial más alto (siempre se renderiza, incluso si está oculto) pero alternancia barata (solo un cambio 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 admite cadenas v-else-if/v-else; v-show no las admite (solo alterna un elemento).
v-show no funciona en envoltorios <template> (no hay elemento en el que establecer display); v-if sí funciona.
Elegir el correcto es una verdadera decisión de rendimiento: v-show para cosas que se alternan frecuentemente (el DOM permanece, alternar es barato), v-if para cosas que son condicionales/raras o costosas (no las renderices hasta que las necesites).
Elegir mal — por ejemplo, v-show en contenido pesado que normalmente está oculto — desperdicia trabajo de renderizado.