Directiva v-show în Vue

O altă opțiune pentru afișarea condiționată este directiva v-show. Se folosește într-un mod foarte asemănător:

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

Diferențele constă în faptul că elementul cu v-show va fi întotdeauna randat și va rămâne în DOM, iar va fi comutat doar proprietatea sa CSS display.

Directiva v-if efectuează o randare condiționată "adevărată", deoarece garantează că ascultătorii de evenimente și componentele copil în interiorul blocului sunt distruse în mod corespunzător și recreate la comutarea condiției.

Directiva v-if este de asemenea leneșă: dacă condiția este falsă la momentul randării inițiale, atunci ea nu face nimic - blocul condițional nu va fi randat până când condiția devine adevărată.

În comparație, v-show este mult mai simplă - elementul este întotdeauna randat, indiferent de starea inițială, cu comutarea bazată pe CSS.

În general, v-if are costuri mai mari de comutare, în timp ce v-show are costuri mai mari la randarea inițială. Așa că folosiți v-show, dacă comutările vor fi frecvente, și preferați v-if, dacă condiția poate să nu se schimbe în timpul execuției.

Directiva v-show nu poate fi folosită pe elementul template și nu funcționează cu v-else.

Este dat un paragraf și un buton. Faceți astfel, încât paragraful să se comute la apăsarea butonului.

Spuneți, care sunt diferențele directivelor v-show și v-if.

Spuneți, când este mai bine să folosiți directiva v-show, iar când - v-if.

Spuneți, ce limitări are directiva v-show.