مراقبو Vue.js

يتيح لك Vue watcher الاستماع إلى بيانات المكون وتشغيلها كلما تغيرت خاصية معينة

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

هنا مثال. لدينا مكون يُظهر اسمًا ، ويسمح لك بتغييره بالنقر فوق الزر:

<template>
  <p>My name is {{name}}</p>
  <button @click="changeName()">Change my name!</button>
</template>

<script> export default { data() { return { name: ‘Flavio’ } }, methods: { changeName: function() { this.name = ‘Flavius’ } } } </script>

عندما يتغير الاسم ، نريد القيام بشيء ما ، مثل طباعة سجل وحدة التحكم.

يمكننا القيام بذلك عن طريق الإضافة إلىwatchالكائن ، خاصية تسمى خاصية البيانات التي نريد مراقبتها:

<script>
export default {
  data() {
    return {
      name: 'Flavio'
    }
  },
  methods: {
    changeName: function() {
      this.name = 'Flavius'
    }
  },
  watch: {
    name: function() {
      console.log(this.name)
    }
  }
}
</script>

الوظيفة المخصصة لwatch.nameيمكن أن تقبل اختياريًا معلمتين. الأول هو قيمة العقار الجديد. والثاني قيمة العقار القديم:

<script>
export default {
  /* ... */
  watch: {
    name: function(newValue, oldValue) {
      console.log(newValue, oldValue)
    }
  }
}
</script>

لا يمكن البحث عن المراقبين من قالب كما يمكنك باستخدام الخصائص المحسوبة.

تحميل مجانيكتيب Vue


المزيد من دروس vue: