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