Direktiva v-show ve Vue

Další možností podmíněného zobrazení je direktiva v-show. Používá se velmi podobně:

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

Rozdíl je v tom, že prvek s v-show bude vždy vykreslen a zůstane v DOM, a přepínáno bude pouze jeho CSS vlastnost display.

Direktiva v-if provádí "skutečné" podmíněné vykreslování, protože zaručuje, že posluchači událostí a podřízené komponenty uvnitř bloku jsou řádně zničeny a znovu vytvořeny při přepínání podmínky.

Direktiva v-if je také líná: pokud je podmínka nepravdivá v okamžiku počátečního vykreslení, neudělá nic - podmíněný blok nebude vykreslen, dokud se podmínka nestane pravdivou.

Pro srovnání, v-show je mnohem jednodušší - prvek je vždy vykreslen, bez ohledu na počáteční stav, s přepínáním založeným na CSS.

Obecně má v-if vyšší náklady na přepínání, zatímco v-show má vyšší náklady na počáteční vykreslení. Takže použijte v-show, pokud budou přepínání častá, a upřednostňujte v-if, pokud se podmínka během provozu nemusí změnit.