Wymień różnice między dyrektywami v-show i v-if.

v-if warunkowo renderuje element, całkowicie usuwając go z DOM, jeśli warunek jest fałszywy. v-show zawsze renderuje element, ale przełącza jego właściwość CSS display między none a wartością domyślną w zależności od warunku.

Różnice w wydajności / użytkowaniu:

• v-if: Bardziej obciążające początkowe renderowanie, ale lepsza wydajność przy rzadkich przełączeniach, ponieważ elementy są całkowicie usuwane z DOM.
• v-show: Lżejsze początkowe renderowanie, ale lepiej używać dla elementów, które często się przełączają, ponieważ to tylko zmiana właściwości CSS.

Przykład użycia:

<!-- Użycie v-if -->
<template>
  <div v-if="isVisible">
    Ten blok jest widoczny tylko jeśli isVisible jest prawdziwe
  </div>

  <!-- Użycie v-show -->
  <div v-show="isVisible">
    Ten blok zawsze jest w DOM, ale widoczny tylko jeśli isVisible jest prawdziwe
  </div>
</template>

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