0Pricing
Vue Academy · درس

‏ref مقابل reactive: متى تستخدم كلًّا منهما

الوصول إلى ref.value، وإلغاء تغليف reactive في القوالب، وtoRefs() وtoRef() عند التفكيك

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

أداتا التفاعل

يوفّر Vue طريقتين أساسيتين لإنشاء حالة تفاعلية: ref() وreactive(). وتتداخل استخداماتهما، لكن كل واحدة منهما تناسب مواقف معينة أكثر من الأخرى. ويساعدك معرفة متى تستخدم كل واحدة على إبقاء شيفرتك نظيفة.

يعمل ref مع أي قيمة

يمكن لـ ref() أن يضع أي شيء داخل حاوية: رقمًا أو نصًا أو قيمة منطقية أو مصفوفة أو كائنًا. وتوجد القيمة في .value داخل JavaScript.

import { ref } from 'vue'

const count = ref(0)
const name = ref('Alice')
const isOpen = ref(false)

count.value++
name.value = 'Bob'

يفك ref تغليفه تلقائيًا في القوالب

مع أنك ملزم بكتابة .value في JavaScript، يفك القالب تلقائيًا تغليف ref الموجودة في المستوى الأعلى. لذلك تعمل {{ count }} مباشرةً.

<!-- template -->
<p>{{ count }} - {{ name }}</p>

يُستخدم reactive مع الكائنات

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

import { reactive } from 'vue'

const state = reactive({
  name: 'Alice',
  age: 30,
  hobbies: ['reading']
})

state.age = 31
state.hobbies.push('coding')

يوفّر reactive تفاعلًا عميقًا

تكون الكائنات والمصفوفات المتداخلة داخل كائن reactive تفاعلية أيضًا. ويؤدي تغيير خاصية متداخلة إلى تشغيل التحديثات من دون عمل إضافي.

const state = reactive({ profile: { city: 'Paris' } })
state.profile.city = 'Berlin' // reactive!

قيد reactive: يكسر تفكيك البنية التفاعل

إذا فككت بنية كائن reactive، تصبح المتغيرات المستخرجة قيمًا عادية وتفقد التفاعل. وهذه أكثر مشكلة شائعة ينبغي الانتباه إليها.

const state = reactive({ name: 'Alice' })
let { name } = state
name = 'Bob'
// state.name is still 'Alice' - reactivity lost!

الحل: استخدام toRefs لتفكيك البنية بأمان

تحوّل toRefs() كل خاصية في كائن تفاعلي إلى ref. ويمكنك الآن تفكيك البنية مع الحفاظ على التفاعل، لأن كل جزء هو ref مرتبط بالمصدر.

import { reactive, toRefs } from 'vue'

const state = reactive({ name: 'Alice', age: 30 })
const { name, age } = toRefs(state)
name.value = 'Bob' // state.name is now 'Bob'

استخدام toRef مع خاصية واحدة

إذا كنت تحتاج إلى خاصية واحدة فقط في صورة ref، فاستخدم toRef(state, 'key'). وستظل متزامنة مع الكائن المصدر في الاتجاهين.

import { reactive, toRef } from 'vue'

const state = reactive({ age: 30 })
const age = toRef(state, 'age')
age.value = 31 // state.age is now 31

قاعدة عملية عامة

  • استخدم ref() للقيم البدائية (الأرقام والنصوص والقيم المنطقية) والقيم المستقلة.
  • استخدم reactive() لمجموعة من الخصائص المرتبطة التي تكوّن كائنًا واحدًا.
  • عند إرجاع كائن تفاعلي من composable، غلّفه باستخدام toRefs().

يمكن لـ ref أيضًا احتواء كائنات

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

const user = ref({ name: 'Alice' })
user.value.name = 'Bob' // reactive
user.value = { name: 'Carol' } // replace whole object

جدول ملخّص

  • ref: يقبل أي قيمة، ويحتاج إلى .value في JavaScript، ويفك تغليفه تلقائيًا في القالب، ويمكن إعادة إسناده بالكامل.
  • reactive: يقبل الكائنات فقط، ولا يستخدم .value، ويوفّر تفاعلًا عميقًا، لكنه يتوقف عن التفاعل عند تفكيك بنيته ولا يمكن إعادة إسناده.
  • toRefs: جسر يجعل خصائص الكائن التفاعلي قابلة لتفكيك البنية.

اختبار سريع

اختر الأداة المناسبة.

مراجعة

أهم النقاط:

  • تضع ref() أي قيمة داخل حاوية، وتحتاج إلى .value في JavaScript.
  • تُستخدم reactive() مع الكائنات وتوفّر تفاعلًا عميقًا، لكن تفكيك البنية يكسر هذا التفاعل.
  • تتيح لك toRefs() تفكيك بنية كائن تفاعلي بأمان.
  • استخدم ref للقيم البدائية، وreactive لحالة الكائنات المجمّعة.

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

هل درس «‏ref مقابل reactive: متى تستخدم كلًّا منهما» مجاني؟

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

ماذا ستتعلم في «‏ref مقابل reactive: متى تستخدم كلًّا منهما»؟

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

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

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

كم من الوقت يستغرق درس «‏ref مقابل reactive: متى تستخدم كلًّا منهما»؟

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

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

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

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

  1. لماذا Composition API؟
  2. دالة setup() والمتغيرات التفاعلية
  3. ‏ref مقابل reactive: متى تستخدم كلًّا منهما
  4. ‏Computed وWatch في Composition API
← العودة إلى Vue Academy