Direttiva v-show in Vue

Un'altra opzione per la visualizzazione condizionale è la direttiva v-show. Si utilizza in modo molto simile:

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

La differenza è che l'elemento con v-show sarà sempre renderizzato e rimarrà nel DOM, e verrà alternata solo la sua proprietà CSS display.

La direttiva v-if esegue un rendering condizionale "vero", poiché garantisce che gli ascoltatori di eventi e i componenti figli all'interno del blocco vengano distrutti e ricreati correttamente durante l'alternanza delle condizioni.

La direttiva v-if è anche pigra (lazy): se la condizione è falsa al momento del rendering iniziale, allora non farà nulla - il blocco condizionale non verrà renderizzato fino a quando la condizione non diventa vera.

In confronto, v-show è molto più semplice - l'elemento viene sempre renderizzato, indipendentemente dallo stato iniziale, con alternanza basata sul CSS.

In generale, v-if ha costi di alternanza più alti, mentre v-show ha costi di rendering iniziale maggiori. Quindi, usa v-show se le alternanze sono frequenti, e preferisci v-if se la condizione potrebbe non cambiare durante l'esecuzione.