watch اور watchEffect میں کیا فرق ہے؟

Question

Accepted Answer

دونوں reactive تبدیلیوں کے جواب میں side effects چلاتے ہیں، لیکن وہ اس میں مختلف ہیں کہ dependencies کیسے متعین کی جاتی ہیں اور وہ آپ کو کیا معلومات دیتے ہیں۔ انہیں side effects کے لیے استعمال کریں (API calls، logging، manual DOM کام) — **نہیں** values اخذ کرنے کے لیے (وہ `computed` ہے)۔ ## watch — واضح source، پرانی + نئی values دیتا ہے ```vue ``` `watch` ایک **مخصوص** source کو دیکھتا ہے جو آپ نام دیتے ہیں، callback صرف اس وقت چلاتا ہے جب وہ source تبدیل ہو، اور **پرانی اور نئی values** فراہم کرتا ہے — مفید جب آپ کو انہیں موازنہ کرنا ہو یا state کے ایک خاص حصے پر رد عمل ظاہر کرنا ہو۔ ## watchEffect — خودکار dependency tracking، فوری چلتا ہے ```vue ``` `watchEffect` اس کے اندر استعمال ہونے والی ہر reactive value کو **خودکار طور پر track کرتا ہے** (کوئی source فہرست نہیں)، اور **setup پر فوری طور پر چلتا ہے** (پھر کسی بھی dependency تبدیلی پر دوبارہ چلتا ہے)۔ کوئی پرانی/نئی values نہیں۔ ## شانہ بشانہ ```text watch watchEffect Dependencies explicit (you name them) automatic (tracked from usage) Runs immediately? no (unless immediate:true) yes Old + new values? yes no Best for reacting to specific state, running an effect that depends needing prev value on several values ``` ## مفید watch options ```js watch(source, cb, { immediate: true, // run once right away (like watchEffect) deep: true, // watch nested object changes }); watch([a, b], ([newA, newB]) => {}); // watch multiple sources ``` ## یہ کیوں اہم ہے صحیح ٹول کا انتخاب reactive side effects کو صاف رکھتا ہے: derived values کے لیے **`computed`** استعمال کریں، جب آپ کو کسی مخصوص source پر رد عمل ظاہر کرنا ہو یا پرانی/نئی کا موازنہ کرنا ہو تو **`watch`** استعمال کریں (مثال کے طور پر جب id تبدیل ہو تو fetch کریں)، اور ایسے effects کے لیے **`watchEffect`** استعمال کریں جو متعدد values پر منحصر ہوں اور انہیں خودکار طور پر track کریں۔ Watchers کو derivation کے لیے غلط استعمال کرنا (بجائے `computed` کے) ایک عام anti-pattern ہے۔