Uveďte rozdíly mezi direktivami v-show a v-if.

v-if podmíněně vykreslí prvek a úplně jej odstraní z DOM, pokud je podmínka nepravdivá. v-show vždy vykreslí prvek, ale přepíná jeho CSS vlastnost display mezi none a původní hodnotou v závislosti na podmínce.

Rozdíly ve výkonu / použití:

• v-if: Složitější počáteční vykreslení, ale lepší výkon při vzácných přepínáních, protože prvky jsou úplně odstraněny z DOM.
• v-show: Lehčí počáteční vykreslení, ale vhodnější pro prvky, které se často přepínají, protože mění pouze CSS vlastnost.

Příklad použití:

<!-- Použití v-if -->
<template>
  <div v-if="isVisible">
    Tento blok je viditelný pouze pokud je isVisible pravdivé
  </div>

  <!-- Použití v-show -->
  <div v-show="isVisible">
    Tento blok je vždy v DOM, ale viditelný pouze pokud je isVisible pravdivé
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
}
</script>