Vue Academy · درس

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

استجب لتغيّرات البيانات باستخدام Watchers والمراقبة العميقة

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

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

ما هو المراقب؟

يُشغّل المراقب دالةً استجابةً لتغيّر في البيانات.

على خلاف computed، يُستخدم لتنفيذ آثار جانبية
مثل جلب البيانات، والتسجيل، والحفظ في التخزين
تستجيب عند تغيّر شيء محدد

دالة watch

تستقبل دالة watch مصدرًا لمراقبته ودالة رد نداء تتلقى القيمتين الجديدة والقديمة.

import { ref, watch } from "vue"

const query = ref("")

watch(query, (newVal, oldVal) => {
  console.log("changed from", oldVal, "to", newVal)
})

مثال عملي

مراقبة حقل بحث لاستدعاء API عند تغيّره.

const search = ref("")

watch(search, async (newQuery) => {
  const results = await fetchResults(newQuery)
  items.value = results
})

الخيار immediate

افتراضيًا، لا يُشغّل المراقب إلا عند حدوث تغييرات. ويؤدي الخيار immediate إلى تشغيله مرة واحدة فورًا أيضًا.

watch(userId, (id) => {
  loadUser(id)
}, { immediate: true })

// Runs immediately with the current value,
// then again on every change

الخيار deep

لا تؤدي مراقبة كائن إلى تشغيل المراقب افتراضيًا إلا عند تغيّر مرجعه. كما يراقب الخيار deep الخصائص المتداخلة.

const profile = reactive({ name: "Ada", address: { city: "London" } })

watch(profile, (val) => {
  console.log("profile changed")
}, { deep: true })

// Fires even when profile.address.city changes

مراقبة الكائنات المتداخلة

من دون deep، قد لا يؤدي تغيير خاصية متداخلة في كائن تفاعلي تتم مراقبته إلى تشغيل دالة رد النداء كما هو متوقع. ويضمن deep حدوث ذلك، لكنه يتطلب مزيدًا من المعالجة.

استخدم deep فقط عندما تحتاج فعلًا إلى تتبّع الخصائص المتداخلة
قد تكون مراقبة الكائنات الكبيرة باستخدام deep مكلفة

مراقبة دالة getter

لمراقبة قيمة متداخلة محددة، مرّر دالة getter باعتبارها المصدر.

watch(
  () => profile.address.city,
  (newCity) => {
    console.log("city is now", newCity)
  }
)

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

مرّر مصفوفة من المصادر لمراقبة عدة قيم في آن واحد.

watch([width, height], ([newW, newH], [oldW, oldH]) => {
  console.log("size:", newW, "x", newH)
})

watchEffect

تُشغّل watchEffect فورًا، وتُعاد عند تغيّر أي قيمة تفاعلية تقرؤها. ولا تحتاج إلى تحديد قائمة بالمصادر صراحةً.

import { watchEffect } from "vue"

watchEffect(() => {
  console.log("count is", count.value)
})

// Runs now, and again whenever count changes

watch في مقابل watchEffect

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

watch يتطلب مصدرًا صريحًا، ويوفر القيمتين القديمة والجديدة، ويعمل بتكاسل افتراضيًا
watchEffect يتتبع التبعيات تلقائيًا، ويعمل فورًا، ولا يوفر القيمة القديمة

استخدم watch عندما تحتاج إلى القيمة السابقة أو إلى تحكم دقيق، واستخدم watchEffect للسهولة.

المراقبات في Options API

تُعرّف Options API المراقبات داخل كتلة watch، بحيث يكون اسم البيانات هو المفتاح.

export default {
  data() {
    return { question: "" }
  },
  watch: {
    question(newVal, oldVal) {
      this.getAnswer(newVal)
    }
  }
}

تحقق سريع

اختبر مدى فهمك للمراقبات.

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

مراجعة: المراقبات والتفاعلية العميقة

تعلّمت كيفية الاستجابة للتغييرات باستخدام الآثار الجانبية:

تراقب watch مصدرًا وتوفر القيمتين الجديدة والقديمة
يشغّل immediate المراقب مرة واحدة عند البدء
يتتبع deep تغييرات الكائنات المتداخلة
يتتبع watchEffect التبعيات تلقائيًا ويعمل فورًا
يمكنك مراقبة مصادر متعددة باستخدام مصفوفة

التالي: التوجيه باستخدام Vue Router.

البدء مجانًا

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

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

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

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

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

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

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

ماذا ستتعلم في «Watchers والتفاعلية العميقة»؟

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

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

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

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

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

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

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

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

أساسيات التفاعلية
الخصائص المحسوبة
Watchers والتفاعلية العميقة

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