Direktivet v-show i Vue

Ett annat alternativ för villkorlig visning är direktivet v-show. Det används på ett mycket liknande sätt:

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

Skillnaden är att elementet med v-show alltid kommer att renderas och finnas kvar i DOM:en, och endast dess CSS-egenskap display kommer att växlas.

Direktivet v-if utför en "sann" villkorlig rendering, eftersom det garanterar att händelseavlyssnare och underordnade komponenter inuti blocket på rätt sätt förstörs och återskapas när villkoret ändras.

Direktivet v-if är också lat: om villkoret är falskt vid den initiala renderingen, så gör den ingenting - det villkorliga blocket kommer inte att renderas förrän villkoret blir sant.

I jämförelse är v-show mycket enklare - elementet renderas alltid, oavsett utgångsläget, med växling baserad på CSS.

Generellt sett har v-if högre växlingskostnader, medan v-show har högre kostnader vid initial rendering. Så använd v-show, om växlingar kommer att vara frekventa, och föredra v-if om villkoret kanske inte ändras under körning.