Η οδηγία v-show στο Vue

Μια άλλη επιλογή για υπό όρους εμφάνιση είναι η οδηγία v-show. Χρησιμοποιείται με παρόμοιο τρόπο:

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

Η διαφορά είναι ότι το στοιχείο με την v-show θα αποδίδεται πάντα και θα παραμένει στο DOM, ενώ θα αλλάζει μόνο η CSS ιδιότητα display του.

Η οδηγία v-if εκτελεί "πραγματική" υπό όρους απόδοση, καθώς εγγυάται ότι οι ακροατές συμβάντων και τα θυγατρικά components μέσα στο μπλοκ καταστρέφονται σωστά και δημιουργούνται ξανά κατά την εναλλαγή της συνθήκης.

Η οδηγία v-if είναι επίσης τεμπέλικη: εάν η συνθήκη είναι ψευδής κατά τη στιγμή της αρχικής απόδοσης, δεν θα κάνει τίποτα - το υπό όρους μπλοκ δεν θα αποδοθεί μέχρι η συνθήκη να γίνει αληθής.

Σε σύγκριση, η v-show είναι πολύ πιο απλή - το στοιχείο αποδίδεται πάντα, ανεξάρτητα από την αρχική του κατάσταση, με εναλλαγή βασισμένη στο CSS.

Γενικά, η v-if έχει υψηλότερο κόστος εναλλαγής, ενώ η v-show έχει μεγαλύτερο κόστος κατά την αρχική απόδοση. Επομένως, χρησιμοποιήστε την v-show, εάν οι εναλλαγές θα είναι συχνές, και προτιμήστε την v-if, εάν η συνθήκη μπορεί να μην αλλάξει κατά τον χρόνο εκτέλεσης.