Vue direktīva v-show

Vēl viena nosacītā attēlošanas iespēja ir direktīva v-show. To lieto ļoti līdzīgi:

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

Atšķirība ir tāda, ka elements ar v-show vienmēr tiks renderēts un paliks DOM, bet tiks pārslēgts tikai tā CSS īpašība display.

Direktīva v-if veic "īstu" nosacītu renderēšanu, jo tā garantē, ka notikumu klausītāji un apakškomponenti bloka iekšpusē tiek pienācīgi iznīcināti un atjaunoti, mainoties nosacījumam.

Direktīva v-if ir arī slinka: ja nosacījums ir nepatiess sākotnējā renderēšanas brīdī, tā neko nedarīs - nosacītais bloks netiks renderēts līdz brīdim, kad nosacījums kļūs patiess.

Salīdzinājumam, v-show ir daudz vienkāršāka - elements vienmēr tiek renderēts, neatkarīgi no sākotnējā stāvokļa, ar pārslēgšanu, kas balstīta uz CSS.

Kopumā, v-if ir augstākas pārslēgšanas izmaksas, savukārt v-show ir lielākas sākotnējās renderēšanas izmaksas. Tāpēc lietojiet v-show, ja pārslēgšanas notiks bieži, un dodiet priekšroku v-if, ja nosacījums varētu nemainīties darbības laikā.

Direktīvu v-show nevar lietot uz template elementa un tā nedarbojas ar v-else.

Dots rindkopa un poga. Izveidojiet tā, lai rindkopa pārslēgtos, nospiežot uz pogas.

Pastāstiet, kādas atšķirības ir direktīvām v-show un v-if.

Pastāstiet, kad labāk lietot directīvu v-show, bet kad - v-if.

Pastāstiet, kādi ierobežojumi piemīt direktīvai v-show.