PricingLoginStart free
Vue Academy · درس

‏Computed وWatch في Composition API

‏computed() للحالة المشتقة، وwatch() وwatchEffect() للتأثيرات الجانبية

الدرس 4 من 413 خطوة

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

اشتقاق الحالة والتفاعل معها

لا تمثّل الحالة التفاعلية سوى نصف القصة. فأنت تحتاج أيضًا إلى اشتقاق قيم جديدة منها والتفاعل مع تغيّراتها. توفّر Composition API لهذا الغرض computed وwatch وwatchEffect.

استخدام computed للقيم المشتقة

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

import { ref, computed } from 'vue'

const count = ref(2)
const doubled = computed(() => count.value * 2)
console.log(doubled.value) // 4

computed كسولة ومخزّنة مؤقتًا

لا تعيد computed الحساب إلا عندما تتغيّر إحدى تبعياتها التفاعلية. فإذا قرأتها عشر مرات من دون تغييرات، تُنفَّذ دالة getter مرة واحدة ويُعاد استخدام النتيجة المخزّنة مؤقتًا.

وهذا يجعل computed مناسبة جدًا للاشتقاقات المكلفة حسابيًا.

تتحدّث computed تلقائيًا

غيّر إحدى التبعيات، وستتحدّث computed في المرة التالية التي تُقرأ فيها. ولا تحتاج إلى استدعائها يدويًا مطلقًا.

const count = ref(2)
const doubled = computed(() => count.value * 2)
count.value = 5
console.log(doubled.value) // 10

استخدام watch للآثار الجانبية

تراقب watch() مصدرًا تفاعليًا وتُشغّل دالة ردّ نداء عند تغيّره. وتتلقى دالة ردّ النداء القيمة الجديدة والقيمة القديمة.

import { ref, watch } from 'vue'

const count = ref(0)
watch(count, (newVal, oldVal) => {
  console.log('changed from', oldVal, 'to', newVal)
})

watch كسولة افتراضيًا

على عكس computed، لا تشغّل watch دالة ردّ النداء فورًا، بل تنتظر التغيير الأول. استخدمها للآثار الجانبية مثل تسجيل البيانات وجلبها وحفظها في التخزين.

مراقبة مصادر متعددة

مرّر مصفوفة من المصادر لمراقبة عدة قيم في وقت واحد. وتتلقى دالة ردّ النداء مصفوفتين من القيم الجديدة والقديمة.

watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log(newCount, newName)
})

مراقبة getter

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

const state = reactive({ count: 0 })
watch(() => state.count, (newVal) => {
  console.log('count is', newVal)
})

watchEffect: تتبّع تلقائي وتنفيذ فوري

تُشغّل watchEffect() دالتها فورًا، ثم تعيد تشغيلها كلما تغيّرت أي قيمة تفاعلية مستخدمة داخلها. ولا تحتاج إلى سرد التبعيات، إذ يجري تتبّعها تلقائيًا.

import { ref, watchEffect } from 'vue'

const count = ref(0)
watchEffect(() => {
  console.log('count is', count.value)
})
// logs immediately, then on every change

watch مقارنةً بـ watchEffect

  • watch: مصدر صريح، وتنفيذ كسول، ويمنحك القيمتين القديمة والجديدة.
  • watchEffect: يتتبّع التبعيات تلقائيًا، ويُنفَّذ فورًا، ولا يتيح الوصول إلى القيمة القديمة.

استخدم watch عندما تحتاج إلى القيمة السابقة أو تريد تحكمًا دقيقًا. واستخدم watchEffect للآثار الجانبية التفاعلية السريعة.

computed مقابل watch

استخدم computed عندما تريد قيمة مشتقة جديدة. واستخدم watch أو watchEffect عندما تريد تنفيذ إجراء استجابةً لتغيير. لا تستخدم watch لإعادة حساب قيمة؛ فهذا هو دور computed.

اختبار سريع

اختر المساعد التفاعلي المناسب.

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

مراجعة

أصبحت تعرف الآن كيفية اشتقاق القيم والتفاعل معها:

  • computed ينشئ قيمًا مشتقة كسولة ومخزنة مؤقتًا.
  • watch يتفاعل مع مصدر محدد ويمنحك القيمتين الجديدة والقديمة؛ وهو كسول.
  • watchEffect يعمل فورًا ويتتبع الاعتماديات تلقائيًا.
  • استخدم computed للقيم، وwatch/watchEffect للآثار الجانبية.
البدء مجانًا

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

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

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

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

هل درس «‏Computed وWatch في Composition API» مجاني؟

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

ماذا ستتعلم في «‏Computed وWatch في Composition API»؟

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

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

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

كم من الوقت يستغرق درس «‏Computed وWatch في Composition API»؟

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

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

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

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

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