Diretiva v-show no Vue

Outra opção para exibição condicional é a diretiva v-show. É usada de maneira muito semelhante:

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

A diferença é que um elemento com v-show sempre será renderizado e permanecerá no DOM, e apenas sua propriedade CSS display será alternada.

A diretiva v-if realiza uma renderização condicional "verdadeira", pois garante que os ouvintes de eventos e componentes filhos dentro do bloco sejam devidamente destruídos e recriados durante as alternâncias da condição.

A diretiva v-if também é preguiçosa: se a condição for falsa no momento da renderização inicial, ela não fará nada - o bloco condicional não será renderizado até que a condição se torne verdadeira.

Em comparação, v-show é muito mais simples - o elemento é sempre renderizado, independentemente do estado inicial, com alternância baseada em CSS.

Geralmente, v-if tem um custo de alternância mais alto, enquanto v-show tem um custo de renderização inicial maior. Portanto, use v-show se as alternâncias forem frequentes e prefira v-if se a condição pode não mudar durante a execução.

A diretiva v-show não pode ser usada em um elemento template e não funciona com v-else.

Há um parágrafo e um botão. Faça com que o parágrafo seja alternado (toggle) ao clicar no botão.

Explique as diferenças entre as diretivas v-show e v-if.

Explique quando é melhor usar a diretiva v-show e quando - v-if.

Explique quais limitações a diretiva v-show possui.