Uveďte rozdiely medzi direktívami v-show a v-if.

v-if podmienečne vykresľuje prvok a úplne ho odstraňuje z DOM, ak je podmienka nepravdivá. v-show vždy vykresľuje prvok, ale prepína jeho CSS vlastnosť display medzi none a pôvodnou hodnotou v závislosti od podmienky.

Rozdiely vo výkone / použití:

• v-if: Náročnejšie počiatočné vykreslenie, ale lepší výkon pri zriedkavých prepínaniach, pretože prvky sú úplne odstránené z DOM.
• v-show: Ľahšie počiatočné vykreslenie, ale vhodnejšie pre prvky, ktoré sa často prepínajú, pretože mení iba CSS vlastnosť.

Príklad použitia:

<!-- Použitie v-if -->
<template>
  <div v-if="isVisible">
    Tento blok je viditeľný iba ak je isVisible pravdivé
  </div>

  <!-- Použitie v-show -->
  <div v-show="isVisible">
    Tento blok je vždy v DOM, ale viditeľný iba ak je isVisible pravdivé
  </div>
</template>

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