Ambos exibem condicionalmente um elemento, mas fazem isso de maneiras diferentes — v-if adiciona/remove o elemento do DOM; v-show mantém-o no DOM e alterna o 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 tem custo de alternância mais alto (cria/destrói elementos e seus componentes, executa lifecycle hooks a cada vez), mas custo zero quando a condição é false (nada renderizado).v-show tem custo inicial mais alto (sempre renderiza, mesmo se oculto), mas alternância barata (apenas uma mudança de 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 suporta cadeias v-else-if/v-else; v-show não (apenas alterna um elemento).
v-show não funciona em wrappers <template> (não há elemento para definir display); v-if funciona.
Escolher a correta é uma decisão real de desempenho: v-show para coisas alternadas frequentemente (o DOM permanece, alternar é barato), v-if para coisas que são condicionais/raras ou caras (não as renderize até que seja necessário).
Escolher errado — por exemplo, v-show em conteúdo pesado que geralmente está oculto — desperdiça trabalho de renderização.