Direktiva v-show ve Vue

Další možností podmíněného zobrazení je direktiva v-show. Používá se velmi podobně:

<template>
	<p v-show="isAuth">
		+++
	</p>
</template>

Rozdíl je v tom, že prvek s v-show bude vždy vykreslen a zůstane v DOM, a přepínáno bude pouze jeho CSS vlastnost display.

Direktiva v-if provádí "skutečné" podmíněné vykreslování, protože zaručuje, že posluchači událostí a podřízené komponenty uvnitř bloku jsou řádně zničeny a znovu vytvořeny při přepínání podmínky.

Direktiva v-if je také líná: pokud je podmínka nepravdivá v okamžiku počátečního vykreslení, neudělá nic - podmíněný blok nebude vykreslen, dokud se podmínka nestane pravdivou.

Pro srovnání, v-show je mnohem jednodušší - prvek je vždy vykreslen, bez ohledu na počáteční stav, s přepínáním založeným na CSS.

Obecně má v-if vyšší náklady na přepínání, zatímco v-show má vyšší náklady na počáteční vykreslení. Takže použijte v-show, pokud budou přepínání častá, a upřednostňujte v-if, pokud se podmínka během provozu nemusí změnit.

Direktivu v-show nelze použít na elementu template a nefunguje s v-else.

Je dán odstavec a tlačítko. Zařiďte, aby se odstavec přepínal po stisknutí tlačítka.

Vysvětlete, v čem se liší direktivy v-show a v-if.

Vysvětlete, kdy je lepší použít directivu v-show, a kdy - v-if.

Vysvětlete, jaká omezení má direktiva v-show.