كلاهما يعرض عنصرًا بشكل مشروط، لكنهما يفعلان ذلك بشكل مختلف — v-if يضيف/يزيل العنصر من DOM؛ v-show يحتفظ به في DOM ويبدل 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 له تكلفة تبديل أعلى (ينشئ/يحذف العناصر ومكوناتها، يشغل خطافات دورة الحياة في كل مرة) لكن تكلفة صفر عندما تكون الشرط خاطئًا (لا شيء معروض).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 على محتوى ثقيل مخفي عادةً — يهدر عمل التصيير.