Molemmat näyttävät ehdollisesti elementin, mutta ne tekevät sen eri tavalla — v-if lisää/poistaa elementin DOM:sta; v-show pitää sen DOM:ssa ja vaihtaa sen CSS display -asetusta.
<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 on korkeampi vaihtamisen hinta (se luo/poistaa elementtejä ja niiden komponentteja, suorittaa elinkaaren hook-funktioita joka kerta) mutta nolla hinta kun ehto on epätosi (mitään ei renderöity).v-show on korkeampi alkuperäinen hinta (aina renderöity, vaikka piilotettu) mutta halpa vaihtaminen (vain CSS-muutos).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 tukee v-else-if/v-else ketjuja; v-show ei tue (se vaihtaa vain yhtä elementtiä).
v-show ei toimi <template> -kääreillä (ei ole elementtiä, johon asettaa display); v-if tekee.
Oikean valitseminen on todellinen suorituskyvyn päätös: v-show asioille, jotka vaihdetaan usein (DOM säilyy, vaihtaminen on halpa), v-if asioille, jotka ovat ehdollisia/harvinaisia tai kalliita (älä renderöi niitä ennen kuin tarvitset niitä).
Väärän valitseminen — esimerkiksi v-show raskaalle sisällölle, joka on yleensä piilotettu — hukkaa renderöintityön.