Oba podmíněně zobrazují prvek, ale dělají to jinak — v-if přidá/odebere prvek z DOM; v-show ho v DOM ponechá a přepíná jeho 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 má vyšší náklady na přepínání (vytváří/ničí prvky a jejich komponenty, spouští háky životního cyklu pokaždé) ale nulové náklady, když je podmínka nepravdivá (nic se nevrací).v-show má vyšší počáteční náklady (vždy se vykresluje, i když je skrytý) ale levné přepínání (jenom změna 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 podporuje řetězce v-else-if/v-else; v-show je nepodporuje (přepíná pouze jeden prvek).
v-show nefunguje na obalech <template> (není prvek, na kterém by se měl display nastavit); v-if ano.
Výběr toho správného je skutečné rozhodnutí o výkonu: v-show pro věci, které se přepínají často (DOM zůstává, přepínání je levné), v-if pro věci, které jsou podmíněné/vzácné nebo drahé (nevykreslujte je, dokud je nepotřebujete).
Zvolit špatně — například v-show na těžkém obsahu, který je obvykle skrytý — plýtvá práci vykreslování.
Knihovna IT otázek k pohovoru s podrobnými odpověďmi — od Junior po Senior.
Přispět