Και τα δύο εμφανίζουν υπό όρους ένα στοιχείο, αλλά το κάνουν διαφορετικά — v-if προσθέτει/αφαιρεί το στοιχείο από το DOM. v-show το διατηρεί στο DOM και εναλλάσσει τo CSS display του.
<template>
<p v-if="isVisible">Rendered only when true (removed from DOM when false)</p>
<p v-show="isVisible">Always in the DOM; just display:none when false</p>
</template>
<!-- v-if="false" → the element doesn't exist at all -->
<!-- (nothing in the DOM) -->
<!-- v-show="false" → the element exists but is hidden -->
<p style="display: none">...</p>
v-if έχει υψηλότερο κόστος εναλλαγής (δημιουργεί/καταστρέφει στοιχεία και τα συστατικά τους, εκτελεί τα hooks του κύκλου ζωής κάθε φορά) αλλά μηδέν κόστος όταν η συνθήκη είναι ψευδής (τίποτα δεν αποδίδεται).v-show έχει υψηλότερο αρχικό κόστος (αποδίδεται πάντα, ακόμα και αν είναι κρυμμένο) αλλά φτηνή εναλλαγή (απλώς μια αλλαγή CSS).Toggles often (tabs, dropdowns) → v-show (cheap to flip)
Rarely changes / may never render → v-if (skip rendering entirely)
Expensive content rarely shown → v-if (don't pay to build it)
<template>
<p v-if="status === 'loading'">Loading...</p>
<p v-else-if="status === 'error'">Error!</p>
<p v-else>Done</p>
</template>
v-if υποστηρίζει αλυσίδες v-else-if/v-else; v-show δεν υποστηρίζει (εναλλάσσει μόνο ένα στοιχείο).
v-show δεν λειτουργεί σε <template> περιτυλίγματα (δεν υπάρχει στοιχείο για να ορίσετε display σε). v-if το κάνει.
Η επιλογή του σωστού είναι μια πραγματική απόφαση απόδοσης: v-show για πράγματα που εναλλάσσονται συχνά (το DOM παραμένει, η εναλλαγή είναι φτηνή), v-if για πράγματα που είναι υπό όρους/σπάνια ή δαπανηρά (μην τα αποδίδετε μέχρι να τα χρειαστείτε).
Η επιλογή του λάθους — π.χ. v-show σε βαρύ περιεχόμενο που είναι συνήθως κρυμμένο — χάνει εργασία απόδοσης.