Dyrektywa v-show w Vue

Kolejną opcją renderowania warunkowego jest dyrektywa v-show. Używa się jej bardzo podobnie:

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

Różnica polega na tym, że element z v-show będzie zawsze renderowany i pozostanie w DOM, a przełączana będzie jedynie jego właściwość CSS display.

Dyrektywa v-if wykonuje "prawdziwe" renderowanie warunkowe, ponieważ gwarantuje, że detektory zdarzeń i komponenty potomne wewnątrz bloku są właściwie niszczone i odtwarzane podczas przełączania warunku.

Dyrektywa v-if jest również leniwa: jeśli warunek jest fałszywy w momencie początkowego renderowania, to nic nie zrobi - blok warunkowy nie zostanie wyrenderowany dopóki warunek nie stanie się prawdziwy.

Dla porównania, v-show jest znacznie prostsza - element jest zawsze renderowany, niezależnie od stanu początkowego, z przełączaniem opartym na CSS.

Ogólnie rzecz biorąc, v-if ma wyższy koszt przełączania, podczas gdy v-show ma wyższy koszt początkowego renderowania. Więc używaj v-show, jeśli przełączania będą częste, i preferuj v-if, jeśli warunek może się nie zmienić podczas działania aplikacji.