Директивата v-show во Vue

Уште една опција за условно прикажување е директивата v-show. Се користи на многу сличен начин:

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

Разликата е во тоа што елементот со v-show секогаш ќе се рендерира и ќе остане во DOM, а ќе се вклучува/исклучува само неговото CSS својство display.

Директивата v-if извршува "вистинско" условно рендерирање, бидејќи гарантира дека слушателите на настани и деца компоненти внатре во блокот се соодветно уништени и повторно создадени при вклучување/исклучување на условот.

Директивата v-if е исто така мрзлива: ако условот е неточен во моментот на почетното рендерирање, таа нема да направи ништо - условниот блок нема да се рендерира се додека условот не стане точен.

За споредба, v-show е многу поедноставна - елементот секогаш се рендерира, без разлика на почетната состојба, со вклучување/исклучување засновано на CSS.

Генерално, v-if има повисоки трошоци за вклучување/исклучување, додека пак v-show има поголеми трошоци при првичното рендерирање. Затоа користете v-show, ако вклучувањата/исклучувањата ќе бидат чести, и преферирајте v-if, ако условот може и да не се промени за време на извршувањето.

Директивата v-show не може да се користи на елемент template и не работи со v-else.

Даден е параграф и копче. Направете така, што параграфот да се вклучува/исклучува при клик на копчето.

Објаснете, кои се разликите помеѓу директивите v-show и v-if.

Објаснете, кога е подобро да се користи директивата v-show, а кога - v-if.

Објаснете, какви ограничувања ја има директивата v-show.