watch مراقبة تغيّر البيانات (بأسلوب الخيارات)
آخر تحديث: 2026-10-22
watch مراقبة تغيّر البيانات (بأسلوب الخيارات)
ينظّم خيار watch ردود الأحداث وفق «اسم البيانات المراقَبة»: ويدعم handler و deep و immediate واختصار اسم الدالة النصي.
| المجموعة | الخيارات: الحالة |
|---|---|
| النوع | خيار |
| النطاق | داخل المكوّن |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
export default {
data() { return { keyword: "" } },
watch: {
keyword(newVal, oldVal) { /* ... */ },
"user.name"(v) { /* استخدم مفاتيح مقتبسة لمراقبة الحقول المتداخلة */ }
}
}⚙️ الوسائط
| value | كائن: المفاتيح مسارات بيانات (تُكتب بين علامتي اقتباس للمسارات المتداخلة/التي تحتوي نقاطاً)، والقيم دوال أو { handler, deep, immediate } |
|---|
القيمة المُرجعة：بلا قيمة مُعادة؛ يستقبل رد الحدث (القيمة الجديدة، القيمة القديمة)
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
Typing logs 'old → new', for example 'a → ab'.💡 نقاط مهمة
💡 نصيحة تنفيذ كسول: أضف immediate: true إذا أردت أن يعمل مرة أيضاً عند البداية.
⚠️ تحذير لمراقبة الحقول داخل كائن استخدم مفاتيح مقتبسة أو deep: true؛ وتكلفة deep تزداد بحجم الكائن.
ℹ️ ملاحظة الصيغة النصية 'اسم الدالة في methods' تتيح إعادة استخدام دالة موجودة كمعالِج.
🏷️ الحالة ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س ما علاقتها بـ watch في واجهة التركيب؟
ج صياغتان لآلية واحدة: أسلوب الخيارات يستخدم أسماء البيانات كمفاتيح، وواجهة التركيب تمرّر المصدر ورد الحدث صراحة.
س كيف تُراقب تغيّر المصفوفة ككل؟
ج الاستبدال يُفعّلها؛ أما push في المكان نفسه فيتطلب deep: true أو مراقبة length.
س هل يمكن مراقبة عدة قيم معاً؟
ج اكتب عدة مفاتيح لكل منها رد حدث، أو استخدم watch([a, b]) في واجهة التركيب للدمج.
