Oba warunkowo wyświetlają element, ale robią to w różny sposób — v-if dodaje/usuwa element z DOM; v-show trzyma go w DOM i przełącza jego 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 ma wyższy koszt przełączania (tworzy/usuwa elementy i ich komponenty, uruchamia hooki cyklu życia każdorazowo), ale zerowy koszt, gdy warunek jest false (nic nie jest renderowane).v-show ma wyższy koszt początkowy (zawsze renderuje, nawet jeśli ukryty), ale tanie przełączanie (tylko zmiana 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 obsługuje łańcuchy v-else-if/v-else; v-show nie (przełącza tylko jeden element).
v-show nie działa na opakowaniach <template> (nie ma elementu do ustawienia display); v-if tak.
Wybór właściwego to rzeczywista decyzja wydajnościowa: v-show dla rzeczy przełączanych часто (DOM pozostaje, przełączanie jest tanie), v-if dla rzeczy warunkowych/rzadkich lub drogich (nie renderuj ich, dopóki nie będą potrzebne).
Wybór źle — np. v-show na ciężką zawartość, która zwykle jest ukryta — marnuje pracę renderowania.