V-show-direktiivi Vue:ssa

Toinen ehdollisen näyttämisen vaihtoehto on v-show -direktiivi. Sitä käytetään hyvin samankaltaisesti:

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

Ero on siinä, että elementti, jossa on v-show, tulee aina renderöityä ja pysyy DOM:ssa, ja vain sen CSS-ominaisuutta display vaihdellaan.

v-if -direktiivi suorittaa "todellisen" ehdollisen renderöinnin, koska se takaa, että tapahtumakuuntelijat ja lapsikomponentit lohkon sisällä tuhoutuvat asianmukaisesti ja luodaan uudelleen, kun ehto vaihtuu.

v-if -direktiivi on myös laiska: jos ehto on epätosi alkuperäisen renderöinnin yhteydessä, se ei tee mitään - ehdollista lohkoa ei renderöidä ennen kuin ehto muuttuu todeksi.

Verrattuna v-show on paljon yksinkertaisempi - elementti renderöityy aina, riippumatta alkutilasta, ja vaihto perustuu CSS:ään.

Yleisesti ottaen v-if:llä on korkeammat kytkentäkustannukset, kun taas v-show:llä on suuremmat kustannukset alkuperäisessä renderöinnissä. Joten käytä v-show:ta, jos kytkentöjä tapahtuu usein, ja suosi v-if:tä, jos ehto saattaa olla muuttumaton suorituksen aikana.