Båda visar ett element villkorligt, men på olika sätt — v-if lägger till/tar bort elementet från DOM; v-show behåller det i DOM och togglar dess 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 har högre toggle-kostnad (den skapar/förstör element och deras komponenter, kör lifecycle hooks varje gång) men noll kostnad när villkoret är false (ingenting renderas).v-show har högre initialkostnad (renderas alltid, även om dolt) men billigt toggande (bara en CSS-ändring).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 stöder v-else-if/v-else-kedjor; v-show gör det inte (den togglar bara ett element).
v-show fungerar inte på <template>-omslutningar (det finns ingen element att sätta display på); v-if gör det.
Att välja rätt är ett verkligt prestandabeslut: v-show för saker som togglas ofta (DOM kvarstår, togglingen är billig), v-if för saker som är villkorliga/sällsynta eller dyra (rendera dem inte förrän de behövs).
Att välja fel — t.ex. v-show på tungt innehål som vanligtvis är dolt — slösar renderingsarbete.