watchEffect() أثر جانبي بتتبع تلقائي للاعتماديات
آخر تحديث: 2026-10-22
watchEffect() أثر جانبي بتتبع تلقائي للاعتماديات
تُنفّذ watchEffect() الدالة الممرّرة فورًا وتتتبع تلقائيًا كل البيانات التفاعلية المستخدمة فيها: فتُعاد للتنفيذ بمجرد تغيّر أي اعتمادية.
| المجموعة | التفاعلية: الأساس |
|---|---|
| النوع | API |
| النطاق | داخل المكوّن |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
watchEffect(() => {
document.title = `${count.value} نقرات` // تتبّع count تلقائيًا
})
// عند الحاجة إلى التنظيف يُستقبل onCleanup
watchEffect((onCleanup) => { const t = setTimeout(fn, 500); onCleanup(() => clearTimeout(t)) })⚙️ الوسائط
| effect | دالة الأثر الجانبي، وتستقبل onCleanup لتسجيل منطق التنظيف |
|---|---|
| options | flush (pre|post|sync) / onTrack / onTrigger |
القيمة المُرجعة：دالة stop() لإيقاف الاستماع
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
The title becomes '0 clicks' on mount and updates after every click.💡 نقاط مهمة
💡 نصيحة لا حاجة لكتابة قائمة اعتماديات يدويًا: يُتتبَّع كل ما تقرأه الدالة.
ℹ️ ملاحظة لا يمكن الحصول على القيمة القديمة: إذا احتجت مقارنة القيمتين القديمة والجديدة استخدم watch() مع التصريح بالمصدر يدويًا.
⚠️ تحذير عند إرسال طلبات داخل الأثر الجانبي ألغِ الطلبات القديمة عبر onCleanup وإلا نشأت حالات تزاحم مع التغيّرات السريعة.
🏷️ الأساس ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س كيف أختار بين watchEffect وwatch؟
ج اعتماديات بسيطة ولا حاجة للقيمة القديمة → watchEffect (شيفرة أقصر)؛ والحاجة إلى القيمة القديمة أو تحكم دقيق في الاعتماديات أو تنفيذ مؤجل → watch.
س لماذا تُعاد الدالة للتنفيذ عند تغيّر بيانات لم أستخدمها؟
ج تُتتبَّع فقط البيانات التفاعلية المقروءة فعلًا — فإذا كانت القراءة داخل فرع شرطي تتغيّر الاعتماديات حسب مسار التنفيذ.
س هل يمكن إيقاف watchEffect؟
ج نعم، يكفي استدعاء stop() المُعادة؛ كما تتوقف تلقائيًا عند إلغاء تحميل المكوّن.
