Директива 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.