Frontend Academy · درس

ref() وreactive()

أنشئ قيمًا بدائية تفاعلية باستخدام ref()، وغلّف الكائنات باستخدام reactive()، وافهم متى تستخدم كلًا منهما وكيف تصل إلى قيم ref عبر .value.

ref() وreactive() درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

التفاعلية في Vue 3

تستخدم Composition API في Vue 3 بدائيات تفاعلية لتتبّع الحالة. الدالتان الأساسيتان هما ref() للقيم البدائية، وreactive() للكائنات. وتحدّث التغيّرات واجهة المستخدم تلقائياً.

استخدام ref() للقيم البدائية

تغلّف ref(value) قيمةً داخل حاوية تفاعلية. يمكنك الوصول إلى القيمة وتعديلها عبر .value في script. وفي القوالب، تزيل Vue تغليف refs تلقائياً، لذلك لا حاجة إلى .value.

<script setup>
import { ref } from 'vue';

const count = ref(0);
const name  = ref('Alice');

function increment() {
  count.value++; // .value in script
}
</script>

<template>
  <p>{{ count }}</p>  <!-- no .value in template -->
  <button @click="increment">+</button>
</template>

استخدام reactive() للكائنات

تعيد reactive(object) وكيلاً تفاعلياً بعمق للكائن. يمكنك الوصول إلى الخصائص مباشرةً، ولا حاجة إلى .value في أي موضع.

<script setup>
import { reactive } from 'vue';

const form = reactive({
  email: '',
  password: '',
  rememberMe: false
});

// Mutate directly:
form.email = 'user@example.com';
</script>

<template>
  <input v-model="form.email">
</template>

ref مقارنةً بـ reactive — متى تستخدم كلّاً منهما

استخدم ref() من أجل: القيم البدائية (string وnumber وboolean)، والقيم التي قد تكون null، والقيم المُعادة من composables، إذ يسهل تفكيكها. واستخدم reactive() من أجل: البيانات المرتبطة التي تنتمي معاً إلى كائن واحد.

مشكلة تفكيك reactive()

يؤدي تفكيك كائن تفاعلي إلى فقدان التفاعلية، لأن الخصائص المستخرجة تصبح قيماً عادية وليست refs تفاعلية.

const state = reactive({ count: 0 });
const { count } = state; // NOT reactive
count++; // doesn't update Vue's tracking

// Fix: use toRefs() to destructure reactively:
import { toRefs } from 'vue';
const { count } = toRefs(state); // count is now a ref
count.value++;

toRef وtoRefs

تنشئ toRef(obj, 'key') ref مرتبطاً بخاصية واحدة. وتحول toRefs(obj) جميع خصائص كائن تفاعلي إلى refs فردية مرتبطة — ما يجعل تفكيكها آمناً.

import { toRefs } from 'vue';

const user = reactive({ name: 'Alice', age: 30 });
const { name, age } = toRefs(user);
// name and age are refs, still linked to user
name.value = 'Bob'; // user.name also becomes 'Bob'

استخدام ref() لعناصر DOM

استخدم ref(null) مع سمة ref مطابقة في القالب للحصول على مرجع تفاعلي إلى عنصر DOM أو مثيل مكوّن ابن.

<script setup>
import { ref, onMounted } from 'vue';

const inputEl = ref<HTMLInputElement | null>(null);

onMounted(() => {
  inputEl.value?.focus(); // now the DOM element is available
});
</script>

<template>
  <input ref="inputEl" type="text">
</template>

isRef وunref

تتحقق isRef(val) مما إذا كانت القيمة ref. وتزيل unref(val) تغليف ref، أو تعيد القيمة كما هي إذا لم تكن ref. وهذا مفيد في composables التي تقبل refs وقِيماً عادية معاً.

import { isRef, unref } from 'vue';

function double(val: Ref<number> | number) {
  return unref(val) * 2; // works with both ref and plain number
}

shallowRef وshallowReactive

تكون shallowRef() تفاعلية على المستوى الأعلى فقط، وليس بعمق. وينطبق الأمر نفسه على shallowReactive() مع الكائنات. استخدمهما لتحسين الأداء عندما لا تكون التفاعلية العميقة مطلوبة، مثل هياكل البيانات الكبيرة غير القابلة للتغيير.

تعديل reactive() مقارنةً باستبداله

مع reactive()، عدّل الخصائص مباشرةً. لا يمكنك استبدال الكائن بأكمله، لأن reactive() يحتاج إلى المرجع نفسه. أما للاستبدال، فاستخدم ref() التي تسمح بالتعبير ref.value = newObject.

const state = reactive({ items: [] });
state.items.push(newItem); // OK
state.items = [newItem];   // also OK (mutating the property)
// state = reactive({ items: [newItem] }); // LOSES REACTIVITY — can't reassign

التفاعلية العميقة

تكون reactive() تفاعلية بعمق افتراضياً، إذ تتتبّع Vue التغيّرات في الكائنات والمصفوفات المتداخلة. هذا مريح، لكنه قد يكون مكلفاً للكائنات الكبيرة جداً. فكّر في استخدام shallowReactive للحالات الحساسة للأداء.

تحقّق سريع

لماذا يؤدي تفكيك كائن reactive() إلى فقدان التفاعلية؟

مراجعة: ref() وreactive()

تغلّف ref() القيم البدائية؛ ويمكن الوصول إليها عبر .value في script، بينما تُزال التغلفة تلقائياً في القوالب. تجعل reactive() الكائنات تفاعلية بعمق، وتُعدّل الخصائص مباشرةً. يؤدي التفكيك إلى فقدان التفاعلية، لذا استخدم toRefs(). استخدم ref(null) لمراجع عناصر القالب. استخدم shallowRef وshallowReactive لتحسين الأداء. واستخدم isRef وunref في الأدوات المساعدة لـ composables.

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

هل درس «ref() وreactive()» مجاني؟

نعم — نص درس «ref() وreactive()» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «ref() وreactive()»؟

أنشئ قيمًا بدائية تفاعلية باستخدام ref()، وغلّف الكائنات باستخدام reactive()، وافهم متى تستخدم كلًا منهما وكيف تصل إلى قيم ref عبر .value. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «ref() وreactive()»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Frontend Academy