Direktíva v-show vo Vue

Ďalšou možnosťou podmieneného zobrazenia je direktíva v-show. Používa sa veľmi podobne:

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

Rozdiel je v tom, že prvok s v-show bude vždy vykreslený a zostane v DOM, a prepínať sa bude len jeho CSS vlastnosť display.

Direktíva v-if vykonáva "skutočné" podmienené vykreslovanie, pretože zaručuje, že odpočúvače udalostí a podriadené komponenty vnútri bloku sú riadne zničené a znovu vytvorené pri prepínaní podmienky.

Direktíva v-if je tiež lenivá: ak je podmienka nepravdivá v čase počiatočného vykreslenia, neurobí nič - podmienený blok nebude vykreslený, kým sa podmienka nestane pravdivou.

Pre porovnanie, v-show je oveľa jednoduchšia - prvok je vždy vykreslený, bez ohľadu na počiatočný stav, s prepínaním založeným na CSS.

Vo všeobecnosti má v-if vyššie náklady na prepínanie, kým v-show má vyššie náklady na počiatočné vykreslenie. Takže použite v-show, ak budú prepínania časté, a uprednostnite v-if, ak sa podmienka počas behu programu nemusí zmeniť.