Vue / الأساسي: المكوّنات التفاعلية وعقود الإدخال / الدرس 3

التفاعلية والمراجع والوسطاء

افهم القراءات التي يتتبعها Vue والكتابات المحفزة للتحديث كي تبقى الحالة مراقبة عبر الحدود.

وقت القراءة التقريبي: 3 دقيقةتاريخ مراجعة المحتوى 2026-10-25

في هذه الصفحة

أهداف الدرس

ميّز حاويات ref من وسطاء الكائنات التفاعلية.
احفظ الوصول التفاعلي عند المرور بالدوال أو التفكيك.

تتبّع الوصول لا أسماء المتغيرات

تربط التفاعلية قراءات الأثر بالتغييرات اللاحقة. لا يصير المتغير العادي مراقباً لظهور اسمه في القالب. يغلّف ref القيمة بحاوية تستخدم .value في JavaScript، ويعيد reactive وسيط كائن. يهم المرور بالحاوية أو الوسيط؛ فالعدد المنسوخ قيمة لحظة لا علاقة حية. يفسر ذلك أخطاء عرض كثيرة بدقة أكبر من قول إن Vue لم يلاحظ. حدد القراءة المتتبعة أولاً.

استخدم ref باتساق بين النص والقالب

يمتلك المثال ref واحداً ويكشفه عبر setup. يزيد JavaScript count.value للعمل بالحاوية، ويفك القالب المرجع العلوي في سياقه الموثق فيعرض count. ليست القاعدة عامة؛ قد تحتاج المراجع بالمصفوفة والمجموعة الأصلية .value. أوضح الفرق في المساعدات والبنى. تستقبل دالة count.value العدد الحالي، بينما تستقبل دالة count الحاوية وقيمتها المستقبلية.

vue تحديث ref صريح وقراءة قالب

<script setup>
import { ref } from "vue"
const count = ref(0)
function increment() {
  count.value += 1
}
</script>

<template>
  <button type="button" @click="increment">Count: {{ count }}</button>
</template>

في مشروع Vue 3.5 مضبوط يبدأ Count: 0 ويزيد بالضغط. يستخدم النص والقالب صيغتي وصول موثقتين مختلفتين. لم ينفذ هذا الجزء بتشغيل Vue أو متصفح.

احتفظ بمسار الوصول التفاعلي

يحول reactive وصول الكائنات العادية بعمق وفق قواعده. يفصل تفكيك خاصية بدائية المتغير عن القراءة اللاحقة للوسيط، ولا تتبع المستهلكات استبدال حاوية reactive بكائن عادي تلقائياً. احفظ مالكاً ثابتاً أو ref للقابل للاستبدال أو getter وأداة مرجع مناسبة. تفكيك defineProps بمترجم 3.5 تحويل خاص لاحقاً وليس جعل كل تفكيك تفاعلياً. ميّز التشغيل وإعادة كتابة المترجم.

أثبت حد النسخ في JavaScript العادي

يثبت المثال حقيقة لغة سابقة للإطار: ينسخ تفكيك العدد قيمته الحالية، ويقرأ getter الكائن كل استدعاء. يستطيع Vue تتبع القراءة داخل مستهلك مناسب، لكن المثال الخالص لا يثبت التتبع أو العرض. افصل به سوء فهم اللغة من سؤال Vue. حدد هل يقبل المساعد لقطة أو ref أو getter أو كائناً لأن العقود تختلف بعد تغير المصدر.

javascript توضيح محلي كامل لنسخ القيمة

const record = { count: 1 }
const { count: snapshot } = record
const current = () => record.count
record.count = 2
if (snapshot !== 1 || current() !== 2) {
  throw new Error("VALUE_COPY_MISMATCH")
}

لا يعتمد JavaScript على Vue ويختبر بـ Node. تبقى اللقطة 1 ويعيد getter العدد 2. تظل مراقبة الإطار وآثاره وتحديث DOM ادعاءات مستقلة غير مختبرة هنا.

توقع تجميع العرض وتحقق من الحد الصحيح

قد تتغير الحالة فوراً ويؤجل DOM لدورة التحديث. استخدم nextTick عند الحاجة الفعلية للـ DOM بعد التغيير لا مؤقتاً أو عرضاً قسرياً. تحتاج الحالة العميقة والمراجع المتداخلة والهوية عقوداً مع المكتبات. لا تعدل الأصل غير الوسيط وتتوقع كل مستهلك كأنه قرأ الوسيط. شخّص المالك والمصدر ومسار التعديل والتوقيت قبل إضافة مراقبات تخفي الانفصال.

الأخطاء الشائعة وإصلاحها

يتوقف بدائي مفكك عن متابعة التحديث

لماذا يحدث؟: يحمل المستهلك نسخة لا وصولاً تفاعلياً.
كيف تصلحه؟: مرر مرجعاً أو getter أو احفظ وصول الخاصية.
كيف تتجنب تكراره؟: وثق عقد مدخل المساعد.

يغير النص متغير ref بصورة خاطئة

لماذا يحدث؟: اختلطت الحاوية وقيمتها.
كيف تصلحه؟: اقرأ وعدل .value حيث تتطلب الواجهة.
كيف تتجنب تكراره؟: افصل النص عن فك القالب.

تسبق قراءة DOM اكتمال العرض

لماذا يحدث؟: اعتُبر التغير الفوري تحديث DOM فورياً.
كيف تصلحه؟: استخدم التوقيت الموثق وnextTick عند الحاجة.
كيف تتجنب تكراره؟: اختبر الحالة وDOM منفصلين.

اختبر فهمك

1. يتلقى مساعد count.value. هل يراقب المرجع لاحقاً تلقائياً؟

اعرض الحل المشروح

ليس من البدائي وحده؛ تلقى لقطة. مرر مرجعاً أو getter صريحاً عند الحاجة للمستقبل، واستخدم القراءة داخل المستهلك التفاعلي المناسب.

2. لماذا لا يصلح تفكيك خصائص Vue 3.5 كل القيم المفككة؟