Дырэктыва 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.