V-show-direktiivi Vue:ssa

Toinen ehdollisen näyttämisen vaihtoehto on v-show -direktiivi. Sitä käytetään hyvin samankaltaisesti:

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

Ero on siinä, että elementti, jossa on v-show, tulee aina renderöityä ja pysyy DOM:ssa, ja vain sen CSS-ominaisuutta display vaihdellaan.

v-if -direktiivi suorittaa "todellisen" ehdollisen renderöinnin, koska se takaa, että tapahtumakuuntelijat ja lapsikomponentit lohkon sisällä tuhoutuvat asianmukaisesti ja luodaan uudelleen, kun ehto vaihtuu.

v-if -direktiivi on myös laiska: jos ehto on epätosi alkuperäisen renderöinnin yhteydessä, se ei tee mitään - ehdollista lohkoa ei renderöidä ennen kuin ehto muuttuu todeksi.

Verrattuna v-show on paljon yksinkertaisempi - elementti renderöityy aina, riippumatta alkutilasta, ja vaihto perustuu CSS:ään.

Yleisesti ottaen v-if:llä on korkeammat kytkentäkustannukset, kun taas v-show:llä on suuremmat kustannukset alkuperäisessä renderöinnissä. Joten käytä v-show:ta, jos kytkentöjä tapahtuu usein, ja suosi v-if:tä, jos ehto saattaa olla muuttumaton suorituksen aikana.

v-show -direktiiviä ei voi käyttää template -elementillä, eikä se toimi v-else:n kanssa.

On annettu kappale ja painike. Tee niin, että kappale näkyy/piilotetaan (toggle) painiketta napsautettaessa.

Kerro, mitä eroja v-show - ja v-if -direktiiveillä on.

Kerro, milloin on parempi käyttää v-show -direktiiviä ja milloin v-if -direktiiviä.

Kerro, mitä rajoituksia v-show -direktiivillä on.