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

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

<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, εάν η συνθήκη μπορεί να μην αλλάξει κατά τον χρόνο εκτέλεσης.

Η οδηγία v-show δεν μπορεί να χρησιμοποιηθεί σε στοιχείο template και δεν λειτουργεί με την v-else.

Δίνεται μια παράγραφος και ένα κουμπί. Κάντε έτσι, ώστε η παράγραφος να εναλλάσσεται πατώντας στο κουμπί.

Εξηγήστε, ποιες είναι οι διαφορές των οδηγιών v-show και v-if.

Εξηγήστε, πότε είναι καλύτερα να χρησιμοποιείται η οδηγία v-show και πότε η v-if.

Εξηγήστε, ποιοι περιορισμοί έχει η οδηγία v-show.