ما الفرق بين watch و watchEffect؟

Question

Accepted Answer

كلاهما يشغل side effects استجابة للتغييرات التفاعلية، لكنهما يختلفان في كيفية تحديد التبعيات وما معلومات يعطيانك إياها. استخدمهما للـ side effects (استدعاءات API، logging، عمل DOM يدوي) — **ليس** لاشتقاق القيم (هذا هو `computed`). ## watch — مصدر صريح، يعطي القيم القديمة والجديدة ```vue ``` `watch` يراقب **مصدر معين** تحدده، يشغل callback فقط عند تغيير ذلك المصدر، ويوفر **القيم القديمة والجديدة** — مفيد عندما تحتاج إلى مقارنتها أو الاستجابة لجزء واحد معين من الحالة. ## watchEffect — تتبع التبعيات التلقائي، ينفذ فوراً ```vue ``` `watchEffect` **يتتبع تلقائياً** كل قيمة تفاعلية مستخدمة بداخله (بدون قائمة مصدر)، وينفذ **فوراً عند الإعداد** (ثم ينفذ مجدداً عند أي تغيير تبعية). بدون قيم قديمة/جديدة. ## جنباً إلى جنب ```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 المفيدة ```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 ``` ## لماذا يهم هذا اختيار الأداة الصحيحة يحافظ على side effects التفاعلية نظيفة: استخدم **`computed`** للقيم المشتقة، **`watch`** عندما تحتاج إلى الاستجابة لمصدر معين أو مقارنة القديم والجديد (مثلاً fetch عند تغيير id)، و **`watchEffect`** للـ effects التي تعتمد على عدة قيم ويجب أن تتتبعها تلقائياً. سوء استخدام watchers للاشتقاق (بدلاً من `computed`) هو anti-pattern شائع.