Direktivet v-show i Vue

Ett annat alternativ för villkorlig visning är direktivet v-show. Det används på ett mycket liknande sätt:

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

Skillnaden är att elementet med v-show alltid kommer att renderas och finnas kvar i DOM:en, och endast dess CSS-egenskap display kommer att växlas.

Direktivet v-if utför en "sann" villkorlig rendering, eftersom det garanterar att händelseavlyssnare och underordnade komponenter inuti blocket på rätt sätt förstörs och återskapas när villkoret ändras.

Direktivet v-if är också lat: om villkoret är falskt vid den initiala renderingen, så gör den ingenting - det villkorliga blocket kommer inte att renderas förrän villkoret blir sant.

I jämförelse är v-show mycket enklare - elementet renderas alltid, oavsett utgångsläget, med växling baserad på CSS.

Generellt sett har v-if högre växlingskostnader, medan v-show har högre kostnader vid initial rendering. Så använd v-show, om växlingar kommer att vara frekventa, och föredra v-if om villkoret kanske inte ändras under körning.

Direktivet v-show kan inte användas på ett element av typen template och fungerar inte med v-else.

Du har ett stycke och en knapp. Gör så att stycket toggle:as vid klick på knappen.

Berätta, vilka skillnader finns mellan direktiven v-show och v-if.

Berätta, när det är bättre att använda direktivet v-show, och när - v-if.

Berätta, vilka begränsningar direktivet v-show har.