Dyrektywa v-show w Vue

Kolejną opcją renderowania warunkowego jest dyrektywa v-show. Używa się jej bardzo podobnie:

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

Różnica polega na tym, że element z v-show będzie zawsze renderowany i pozostanie w DOM, a przełączana będzie jedynie jego właściwość CSS display.

Dyrektywa v-if wykonuje "prawdziwe" renderowanie warunkowe, ponieważ gwarantuje, że detektory zdarzeń i komponenty potomne wewnątrz bloku są właściwie niszczone i odtwarzane podczas przełączania warunku.

Dyrektywa v-if jest również leniwa: jeśli warunek jest fałszywy w momencie początkowego renderowania, to nic nie zrobi - blok warunkowy nie zostanie wyrenderowany dopóki warunek nie stanie się prawdziwy.

Dla porównania, v-show jest znacznie prostsza - element jest zawsze renderowany, niezależnie od stanu początkowego, z przełączaniem opartym na CSS.

Ogólnie rzecz biorąc, v-if ma wyższy koszt przełączania, podczas gdy v-show ma wyższy koszt początkowego renderowania. Więc używaj v-show, jeśli przełączania będą częste, i preferuj v-if, jeśli warunek może się nie zmienić podczas działania aplikacji.

Dyrektywy v-show nie można używać na elemencie template i nie działa z v-else.

Dany jest akapit i przycisk. Spraw, aby akapit przełączał się (toggował) po naciśnięciu przycisku.

Opowiedz, na czym polegają różnice między dyrektywami v-show i v-if.

Opowiedz, kiedy lepiej używać dyrektywy v-show, a kiedy - v-if.

Opowiedz, jakie ograniczenia ma dyrektywa v-show.