دونوں شرطی طور پر کسی عنصر کو دکھاتے ہیں، لیکن وہ مختلف طریقوں سے کرتے ہیں — v-if DOM سے عنصر کو شامل/ہٹاتا ہے؛ v-show اسے DOM میں رکھتا ہے اور اس کی CSS display کو toggle کرتا ہے۔
<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 میں زیادہ toggle لاگت ہے (یہ عناصر اور ان کے components کو بناتا/ہٹاتا ہے، ہر بار lifecycle hooks چلاتا ہے) لیکن جب حالت غلط ہو تو صفر لاگت ہے (کچھ rendered نہیں ہوتا)۔v-show میں زیادہ ابتدائی لاگت ہے (ہمیشہ render ہوتا ہے، یہاں تک کہ اگر چھپا ہوا ہو) لیکن toggle کرنا سستا ہے (صرف 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 chains کو سپورٹ کرتا ہے؛ v-show نہیں کرتا (یہ صرف ایک عنصر کو toggle کرتا ہے)۔
v-show <template> wrappers پر کام نہیں کرتا (وہاں display سیٹ کرنے کے لیے کوئی عنصر نہیں ہے)؛ v-if کام کرتا ہے۔
صحیح کو منتخب کرنا حقیقی کارکردگی کا فیصلہ ہے: v-show ان چیزوں کے لیے جو بار بار toggle ہوتی ہیں (DOM رہتا ہے، flipping سستی ہے)، v-if ان چیزوں کے لیے جو شرطی/نایاب ہوں یا مہنگے ہوں (انہیں اس وقت تک render نہ کریں جب تک ضرورت نہ ہو)۔
غلط منتخب کرنا — مثال کے طور پر بھاری content پر v-show جو عام طور پر چھپا ہوا ہو — rendering کا کام برباد کرتا ہے۔