كيفية استخدام Vue.js Watchers للبيانات التفاعلية

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

ستغطي هذه المقالة أساسيات استخدام المراقبين في Vue.js، بما في ذلك كيفية تعريفهم، وكيفية استخدامهم بشكل فعال، وبعض الأمثلة العملية.

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

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

تعريف المراقب

لتحديد مراقب، حدد خاصية البيانات التي تريد مراقبتها وقم بتوفير دالة لتنفيذها عند تغير تلك الخاصية. فيما يلي مثال أساسي:

<template>
  <div>
    <input v-model="message" placeholder="Type something"/>
    <p>Message: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  watch: {
    message(newValue, oldValue) {
      console.log('Message changed from', oldValue, 'to', newValue);
    }
  }
};
</script>

في هذا المثال، تتم مراقبة خاصية البيانات message. كلما تغيرت message، يقوم المراقب بتسجيل القيم القديمة والجديدة في وحدة التحكم.

استخدام Watchers لمكالمات API

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

فيما يلي مثال لاستخدام مراقب لجلب البيانات من واجهة برمجة التطبيقات:

<template>
  <div>
    <input v-model="searchTerm" placeholder="Search"/>
    <ul>
      <li v-for="item in results" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchTerm: '',
      results: []
    };
  },
  watch: {
    searchTerm(newTerm) {
      this.fetchResults(newTerm);
    }
  },
  methods: {
    async fetchResults(term) {
      if (term) {
        const response = await fetch(`https://api.example.com/search?q=${term}`);
        this.results = await response.json();
      } else {
        this.results = [];
      }
    }
  }
};
</script>

في هذا المثال، تتم مراقبة خاصية البيانات searchTerm، وعندما تتغير، يتم استدعاء طريقة fetchResults لجلب نتائج البحث من واجهة برمجة التطبيقات.

مراقبة عميقة

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

وهنا مثال للمراقبة العميقة:

<template>
  <div>
    <input v-model="user.name" placeholder="Enter your name"/>
    <p>User Name: {{ user.name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: ''
      }
    };
  },
  watch: {
    user: {
      handler(newValue) {
        console.log('User object changed:', newValue);
      },
      deep: true
    }
  }
};
</script>

في هذا المثال، يتم مراقبة الكائن user بشكل متعمق. أي تغييرات على الخصائص المتداخلة داخل الكائن user ستؤدي إلى تشغيل المراقب.

المراقبون الفوريون

في بعض الأحيان قد ترغب في تشغيل المراقب فور إنشاء المكون، وليس فقط عند تغير البيانات. يمكنك تحقيق ذلك عن طريق ضبط الخيار immediate على true.

فيما يلي مثال للمراقب المباشر:

<template>
  <div>
    <input v-model="count" placeholder="Enter a number"/>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  watch: {
    count: {
      handler(newCount) {
        console.log('Count changed to:', newCount);
      },
      immediate: true
    }
  }
};
</script>

في هذا المثال، تم تعيين مراقب count ليتم تشغيله فورًا عند إنشاء المكون، وكذلك كلما تغيرت قيمة count.

أفضل الممارسات لاستخدام المراقبين

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

خاتمة

تُعد مراقبات Vue.js ميزة قيمة للتفاعل مع التغييرات في البيانات التفاعلية وأداء التأثيرات الجانبية. من خلال فهم كيفية استخدام المراقبات بشكل فعال، يمكنك تحسين التفاعلية والاستجابة لتطبيقات Vue.js الخاصة بك. ابدأ في دمج المراقبات في مشاريعك للاستفادة الكاملة من نظام البيانات التفاعلية في Vue.js.