watch() الاستماع لتغيّرات البيانات التفاعلية
آخر تحديث: 2026-10-22
watch() الاستماع لتغيّرات البيانات التفاعلية
تراقب watch() مصدرًا تفاعليًا واحدًا أو أكثر وتنفّذ دالة رد عند التغيّر مع توفير القيمتين القديمة والجديدة — مناسبة للمنطق التفاعلي ذي الآثار الجانبية.
| المجموعة | التفاعلية: الأساس |
|---|---|
| النوع | API |
| النطاق | داخل المكوّن |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
watch(source, (newVal, oldVal) => { ... }, { immediate: true, deep: true })
// الاستماع إلى عدة مصادر
watch([count, keyword], ([c, k], [oc, ok]) => { ... })⚙️ الوسائط
| source | ref / دالة getter / كائن تفاعلي / مصفوفة |
|---|---|
| callback | (newValue, oldValue, onCleanup) => void |
| options | immediate (تنفيذ فوري) / deep (استماع عميق) / flush (pre|post|sync) |
القيمة المُرجعة：دالة stop() لإيقاف الاستماع
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
Editing the input shows 'old → new', e.g. '10 → 12'.💡 نقاط مهمة
💡 نصيحة افتراضيًا مؤجلة: لا تُنفّذ عند البداية؛ وإذا أردت تنفيذها أول مرة أيضًا فأضف immediate: true.
⚠️ تحذير مع deep: true يُجتاز الكائن كله بشكل متكرر بما يكلّف الأداء؛ وللاستماع إلى حقل محدد استخدم getter (() => obj.a) لدقة أكبر.
⚠️ تحذير ألغِ الطلبات القديمة غير المتزامنة داخل onCleanup / onWatcherCleanup وإلا اضطرب ترتيب الاستجابات.
🏷️ الأساس ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س ما الفرق بين watch وcomputed؟
ج computed تُشتق قيمة من البيانات (بقيمة مرجعة وتخزين مؤقت)؛ أما watch فتستجيب للتغيّرات لتنفيذ آثار جانبية (طلبات، تعديل DOM، تخزين محلي) دون قيمة مرجعة.
س كيف أُنفّذ الاستماع مرة أولى فورًا؟
ج أضف { immediate: true }، فيُنفّذ رد النداء مرة عند setup (وتكون oldValue تساوي undefined).
س هل يمكن لـ watch مراقبة عدة بيانات؟
ج نعم، بتمرير مصفوفة: watch([a, b], ([newA, newB]) => ...).
