Vue Academy · درس

أساسيات التفاعلية

تعلّم كيف يتتبع Vue التبعيات التفاعلية

الدرس 1 من 313 خطوة

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

ما هي التفاعلية؟

التفاعلية هي تحديث Vue لعناصر DOM تلقائيًا عند تغيّر بياناتكم.

تغيّرون قيمة في JavaScript
تكتشف Vue التغيير
تُعاد عملية عرض الواجهة لتطابقه

لا حاجة إلى معالجة DOM يدويًا.

كيف تتتبّع Vue التبعيات

تستخدم Vue نظامًا لتتبّع التبعيات.

عندما يقرأ العرض قيمة تفاعلية، تسجّل Vue تلك التبعية
عندما تتغيّر تلك القيمة لاحقًا، تعرف Vue عمليات العرض التي يجب تشغيلها مجددًا
وهذا يجعل التحديثات دقيقة وفعّالة

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

في Composition API، تجعل ref قيمة واحدة تفاعلية.

import { ref } from "vue"

const count = ref(0)
const name = ref("Ada")

count.value++          // update via .value
console.log(name.value) // read via .value

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

تُزال تغلفة refs تلقائيًا في القوالب، لذلك لا تحتاجون إلى .value.

<script setup>
import { ref } from "vue"
const count = ref(0)
</script>

<template>
  <p>{{ count }}</p>
  <button @click="count++">Add</button>
</template>

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

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

import { reactive } from "vue"

const state = reactive({
  count: 0,
  user: { name: "Ada" }
})

state.count++
state.user.name = "Grace"

ref مقارنةً بـ reactive

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

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

تفضّل فرق كثيرة استخدام ref في كل الحالات للحفاظ على الاتساق.

خيار data (Vue 2 / Options API)

تستخدم Options API دالة data. وتكون كل خاصية تُرجعها تفاعلية.

export default {
  data() {
    return {
      count: 0,
      items: []
    }
  },
  methods: {
    add() { this.count++ }
  }
}

محاذير التفاعلية مع المصفوفات

قد يكون تعيين عنصر مباشرًا باستخدام فهرس المصفوفة معقّدًا، خصوصًا في Vue 2.

في Vue 2، لم يكن تعيين arr[5] = x يؤدي إلى تشغيل التحديثات
تتعامل الوكلاء في Vue 3 مع معظم الحالات، لكن لا يزال من الأفضل توخّي الحذر

فضّلوا استخدام أساليب المصفوفات للوضوح والأمان.

أساليب المصفوفات التفاعلية

تُتتبّع الأساليب التي تغيّر المصفوفة مثل push وsplice وpop تفاعليًا.

const items = reactive([1, 2, 3])

items.push(4)        // reactive
items.splice(0, 1)   // reactive

// Replacing an index in Vue 3 proxy:
items[0] = 99        // works in Vue 3

الاستبدال مقابل التغيير

طريقتان لتحديث المصفوفات:

غيّروا المصفوفة باستخدام push وsplice وsort
استبدلوها بتعيين مصفوفة جديدة، مثل مصفوفة ناتجة عن filter أو map

تؤدي الطريقتان إلى تشغيل التفاعلية في Vue 3. وغالبًا ما يكون الاستبدال أنظف للقوائم المشتقة.

// Mutate
state.list.push(item)

// Replace with a filtered copy
state.list = state.list.filter(x => x.active)

تجنّب فقدان التفاعلية

يؤدي تفكيك كائن تفاعلي إلى كسر التفاعلية لهذه المتغيرات.

يؤدي استخراج خاصية إلى نسخ قيمتها الحالية
استخدموا toRefs للحفاظ على التفاعلية عند التفكيك

import { reactive, toRefs } from "vue"

const state = reactive({ count: 0 })

// Keeps reactivity
const { count } = toRefs(state)

اختبار سريع

اختبروا مدى فهمكم لتفاعلية Vue.

أجب عليها في الدرس التفاعلي

مراجعة: أساسيات التفاعلية

تعلّمتم كيفية عمل تفاعلية Vue:

تتتبّع Vue البيانات التي يستخدمها كل عرض
تجعل ref القيم تفاعلية، ويُستخدم .value في JavaScript
تجعل reactive الكائنات تفاعلية، مع الوصول إليها مباشرةً
تستخدم Options API دالة data
استخدموا أساليب المصفوفات وtoRefs لتجنّب فقدان التفاعلية

التالي: الخصائص المحسوبة.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 42
الدروس: 156

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

هل درس «أساسيات التفاعلية» مجاني؟

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

ماذا ستتعلم في «أساسيات التفاعلية»؟

تعلّم كيف يتتبع Vue التبعيات التفاعلية تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

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

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

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

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

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

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