useId() توليد معرّف فريد مستقر

آخر تحديث: 2026-10-22

useId() توليد معرّف فريد مستقر

تُعيد useId() سلسلة معرّف فريدة ومستقرة لكل نسخة مكوّن: تُستخدم لخصائص الوصولية مثل label/for وربط aria، وتضمن تطابق SSR مع مخرجات العميل.

المجموعةالقوالب والمساعدات
النوعAPI
النطاقداخل المكوّن
إصدار Vue3.5+
دعم SSRمدعوم

📝 الصيغة

const id = useId()
// <label :for="id">الاسم</label><input :id="id">

القيمة المُرجعة:سلسلة معرّف فريدة (مستقرة داخل النسخة نفسها)

▶ مثال

عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:

المخرجات:

Each instance gets a distinct ID; clicking a label focuses its input.

💡 نقاط مهمة

💡 نصيحة استخدمها عند كتابة مكوّنات النماذج/النوافذ المنبثقة الصديقة للوصولية، متجنّبًا المعرفات العشوائية اليدوية التي تُحدث عدم اتساق في SSR.
⚠️ تحذير تُعيد الاستدعاءات المتعددة داخل المكوّن نفسه قيمًا مختلفة (كل نقطة استدعاء مستقلة)؛ وإذا احتجت إلى إعادة استخدام القيمة نفسها فخزّنها في متغير.
ℹ️ ملاحظة مضافة في 3.5+؛ وفي الإصدارات الأقدم يمكن البديل بتوليد بادئة + عدّاد تصاعدي ذاتيًا.
المزيد من الحالات قريباً.

📚 دروس ذات صلة

❓ الأسئلة الشائعة

س لماذا لا تُستخدم Math.random()؟
ج القيم العشوائية تختلف بين SSR والعميل مما يُحدث عدم تطابق في الترطيب (hydration)؛ بينما تضمن useId تطابق الطرفين.
س هل يتغيّر المعرّف مع إعادة العرض؟
ج لا، فهو مستقر داخل النسخة نفسها.
س هل يمكن تخصيص البادئة؟
ج لا تتضمن الدالة بذاتها خيار بادئة؛ وإذا احتجت صيغة معينة فارفقها بنفسك.
Web-Tutorial.com

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

100%