Vue Academy · درس

دالة setup() والمتغيرات التفاعلية

نقطة الدخول setup()، واستخدام ref() للقيم الأولية، وreactive() للكائنات، وإرجاع القيم

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

نقطة الدخول setup()

توجد Composition API داخل خيار خاص بالمكوّن يُسمّى setup(). ويُنفّذ هذا الخيار مرة واحدة قبل إنشاء المكوّن، وتعلن داخله الحالة التفاعلية والدوال.

كل ما تُرجعه من setup() يصبح متاحًا في القالب.

إنشاء حالة تفاعلية باستخدام ref

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

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    console.log(count.value) // 0
    return { count }
  }
}

إنشاء كائنات تفاعلية باستخدام reactive

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

import { reactive } from 'vue'

export default {
  setup() {
    const user = reactive({ name: 'Alice', age: 30 })
    console.log(user.name) // Alice
    return { user }
  }
}

إرجاع الحالة إلى القالب

كل ما تُرجعه من setup() في صورة كائن يصبح ارتباطًا في القالب. وهنا يتم إتاحة كل من count وuser.

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    return { count, user }
  }
}

فك التغليف التلقائي في القالب

كتبت في JavaScript count.value، لكنك تكتب في القالب count فقط. يفك Vue تلقائيًا تغليف refs الموجودة في المستوى الأعلى، لذلك لا تكتب .value مطلقًا في القالب.

<!-- template -->
<p>Count: {{ count }}</p>
<p>Name: {{ user.name }}</p>

إضافة الدوال

يمكن للدوال المعرّفة داخل setup() قراءة الحالة التفاعلية وتغييرها. تذكّر أنك لا تزال تستخدم .value مع refs داخل JavaScript.

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    function increment() { count.value++ }
    return { count, increment }
  }
}

ربط ذلك بالقالب

أرجع الدالة واربطها بحدث. عند النقر على الزر، تُستدعى increment فتغيّر ref، ثم يعيد Vue تصيير المكوّن.

<!-- template -->
<button @click="increment">Count is {{ count }}</button>

لا حاجة إلى الكلمة المفتاحية this

لا توجد this داخل setup(). بل تتعامل مباشرةً مع المتغيرات التي عرّفتها. وهذا يجعل فهم الشيفرة أسهل ويجعلها أكثر ملاءمة لـ TypeScript.

لن يمنحك استخدام this داخل setup() مثيل المكوّن.

يُنفَّذ setup قبل الإنشاء

يُنفَّذ setup() في مرحلة مبكرة جدًا — قبل created وقبل إعداد مثيل المكوّن بالكامل. ولهذا لا تتوفر this، ولا يمكنك الوصول إلى DOM هنا بعد.

وسيطا setup: props وcontext

يتلقى setup(props, context) الخصائص المحلولة بوصفها الوسيط الأول، وكائن سياق بوصفه الوسيط الثاني. ويكشف السياق عن attrs وslots وemit وexpose.

export default {
  props: { title: String },
  setup(props, context) {
    console.log(props.title)
    context.emit('ready')
  }
}

مكوّن صغير متكامل

إليك كل شيء معًا: ref وكائن تفاعلي ودالة والارتباطات المُرجعة.

import { ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    function increment() { count.value++ }
    return { count, user, increment }
  }
}

اختبار سريع

تأكّد من فهمك لـ setup() والمتغيرات التفاعلية.

مراجعة

تعلّمت أساسيات Composition API:

يُنفَّذ setup() مرة واحدة قبل الإنشاء، ويُرجع ارتباطات القالب.
تضع ref() قيمة داخل حاوية — استخدم .value في JavaScript.
تضع reactive() كائنًا داخل حاوية — ويمكنك الوصول إلى الخصائص مباشرةً.
يفك القالب تغليف refs تلقائيًا، لذلك لا تحتاج إلى .value فيه.
لا توجد this داخل setup().

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

هل درس «دالة setup() والمتغيرات التفاعلية» مجاني؟

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

ماذا ستتعلم في «دالة setup() والمتغيرات التفاعلية»؟

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

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

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

كم من الوقت يستغرق درس «دالة setup() والمتغيرات التفاعلية»؟

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

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

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

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

لماذا Composition API؟
دالة setup() والمتغيرات التفاعلية
‏ref مقابل reactive: متى تستخدم كلًّا منهما
‏Computed وWatch في Composition API

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