Ονομάστε τις διαφορές μεταξύ των οδηγιών v-show και v-if.

Το v-if αποδίδει ένα στοιχείο υπό όρους, αφαιρώντας το εντελώς από το DOM εάν η συνθήκη είναι ψευδής. Το v-show αποδίδει πάντα το στοιχείο, αλλά εναλλάσσει την ιδιότητα CSS display μεταξύ none και της αρχικής τιμής, ανάλογα με τη συνθήκη.

Διαφορές στην απόδοση / χρήση:

• v-if: Πιο βαριά αρχική απόδοση, αλλά καλύτερη απόδοση σε σπάνιες εναλλαγές, καθώς τα στοιχεία αφαιρούνται εντελώς από το DOM.
• v-show: Ελαφρύτερη αρχική απόδοση, αλλά καλύτερη για στοιχεία που αλλάζουν συχνά, καθώς αλλάζει μόνο η ιδιότητα CSS.

Παράδειγμα χρήσης:

<!-- Χρήση του v-if -->
<template>
  <div v-if="isVisible">
    Αυτό το μπλοκ είναι ορατό μόνο αν το isVisible είναι αληθές
  </div>

  <!-- Χρήση του v-show -->
  <div v-show="isVisible">
    Αυτό το μπλοκ είναι πάντα στο DOM, αλλά ορατό μόνο αν το isVisible είναι αληθές
  </div>
</template>

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