استجابة Vue 3 مبنية على JavaScript Proxies. عندما تجعل الحالة استجابية، يقوم Vue بتغليفها في Proxy يقوم باعتراض القراءات والكتابات، يتيح التتبع للتأثيرات التي تعتمد على الخصائص، وتشغيل تلك التأثيرات عند تغيير البيانات.
() {
(target, {
() {
(obj, key);
obj[key];
},
() {
obj[key] = value;
(obj, key);
;
},
});
}
قراءة الخاصية تتتبع التأثير الحالي كتبعية؛ كتابتها تشغل جميع التأثيرات التي تقرأ منها. هذا هو كيف يعرف Vue بالضبط أي مكون يُعاد تصيير أو حسابات يتم تحديثها عند تغيير خاصية معينة.
// component render, computed, and watchers all run inside an "effect"
effect(() => {
document.body.innerHTML = count.value; // reading count.value tracks this effect
});
count.value++; // triggers the effect → it re-runs → DOM updates
عندما يعمل التأثير، يقوم Vue بوضع علامة عليه كـ "نشط" بحيث تحصل أي قراءات استجابية أثناءه على ارتباط به. غيّر التبعية لاحقًا، وستعاد فقط التأثيرات المتأثرة.
// Vue 2 used Object.defineProperty per-property, which COULDN'T detect:
this.obj.newProp = 1; // ❌ adding a new property (needed Vue.set)
this.arr[0] = 5; // ❌ index assignment
this.arr.length = 0; // ❌ length changes
// Vue 3's Proxy intercepts ALL operations, including new keys, deletes, and arrays ✅
تعترض Proxies الكائن كله (أي مفتاح، إضافات، حذف، طفرات المصفوفة)، مما يزيل التحذيرات المعروفة في Vue 2 — لا مزيد من حلول Vue.set.
reactive(obj) → returns a Proxy of the object
ref(value) → returns an object { value } whose .value access is tracked
(so primitives can be reactive — Proxies only wrap objects)
فهم نموذج track/trigger Proxy يشرح لماذا Vue فعال جدًا (يحدّث فقط التأثيرات التي تعتمد فعلاً على البيانات المتغيرة — استجابة دقيقة الحبيبات) ولماذا كانت القيود القديمة في Vue 2 موجودة وذهبت في Vue 3.
كما يوضح القواعد العملية: لماذا يحتاج reactive إلى كائنات (لا يمكن لـ Proxies أن تلتف حول البدائيات، ومن هنا ref)، ولماذا يقسم reactive الفك البنية التتبع (تفصل القيمة عن اعتراض get/set للـ Proxy).
مكتبة من أسئلة مقابلات تقنية المعلومات مع إجابات مفصّلة — من المبتدئ إلى المتقدم.
تبرع