Les deux affichent conditionnellement un élément, mais de manière différente — v-if ajoute/supprime l'élément du DOM ; v-show le garde dans le DOM et bascule sa propriété 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 a un coût de bascule plus élevé (il crée/détruit les éléments et leurs composants, exécute les hooks de cycle de vie à chaque fois) mais un coût zéro quand la condition est fausse (rien n'est rendu).v-show a un coût initial plus élevé (toujours rendu, même s'il est caché) mais une bascule bon marché (juste un changement 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 supporte les chaînes v-else-if/v-else ; v-show ne les supporte pas (il bascule un seul élément).
v-show ne fonctionne pas sur les wrappers <template> (il n'y a pas d'élément pour définir display) ; v-if le fait.
Choisir le bon est une vraie décision de performance : v-show pour les choses basculées fréquemment (le DOM reste, basculer est bon marché), v-if pour les choses qui sont conditionnelles/rares ou coûteuses (ne les rendez pas avant d'en avoir besoin).
Mal choisir — par exemple v-show sur du contenu lourd qui est généralement caché — gaspille le travail de rendu.