Beide zeigen ein Element bedingt an, aber auf unterschiedliche Weise — v-if fügt das Element zum DOM hinzu/entfernt es; v-show behält es im DOM und wechselt sein 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 hat höhere Umschalt-Kosten (es erstellt/zerstört Elemente und ihre Komponenten, führt jedes Mal Lifecycle Hooks aus), aber null Kosten, wenn die Bedingung falsch ist (nichts gerendert).v-show hat höhere initiale Kosten (wird immer gerendert, auch wenn versteckt), aber günstiges Umschalten (nur eine CSS-Änderung).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 unterstützt v-else-if/v-else Ketten; v-show nicht (es wechselt nur ein Element).
v-show funktioniert nicht auf <template> Wrappern (es gibt kein Element, auf dem display gesetzt werden kann); v-if tut es.
Die richtige Wahl zu treffen ist eine echte Leistungsentscheidung: v-show für Dinge, die häufig umgeschaltet werden (das DOM bleibt bestehen, Umschalten ist billig), v-if für Dinge, die bedingt/selten sind oder teuer (rendern Sie sie erst, wenn nötig).
Die falsche Wahl zu treffen — z.B. v-show bei schwerem Inhalt, der normalerweise versteckt ist — verschwendet Rendering-Arbeit.