Vue.js-کابردها-کتابخانه جاوااسکریپتدوره رایگان-الگوریتم اول-free-آموزش کامل

لطفا صبر کنید...

استفاده از watchers برای مشاهده تغییرات داده‌ها در Vue.js

در Vue.js، watchers یک ویژگی قدرتمند است که به شما این امکان را می‌دهد که تغییرات در داده‌ها یا computed properties خاص را نظارت کنید. وقتی مقدار داده‌ها یا ویژگی‌های محاسبه‌شده تغییر می‌کند، یک تابع خاص (که به آن watcher می‌گوییم) اجرا می‌شود. این ویژگی برای انجام عملیات خاص در پاسخ به تغییرات داده‌ها مفید است، مانند انجام درخواست‌های API، به‌روزرسانی داده‌ها در زمان واقعی، یا اجرای محاسبات خاص.

مفهوم watchers در Vue.js

watchers در Vue برای "تماشای" تغییرات داده‌ها طراحی شده‌اند. وقتی که یک متغیر یا ویژگی خاص در داده‌ها تغییر می‌کند، watcher به طور خودکار اجرا می‌شود. این ویژگی به شما کمک می‌کند که کدهای خاصی را در پاسخ به تغییرات اجرا کنید.

نحوه استفاده از watchers

۱. ساختار ساده یک watcher

یک watcher در Vue به راحتی می‌تواند با استفاده از ویژگی watch در بخش script کامپوننت تعریف شود.

<template>
  <div>
    <input v-model="message" placeholder="پیام خود را وارد کنید" />
    <p>پیام شما: {{ message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`پیام تغییر کرد: از "${oldValue}" به "${newValue}"`);
    }
  }
}
</script>

در اینجا:

  • watch یک شیء است که به شما اجازه می‌دهد روی تغییرات داده‌ها نظارت کنید.
  • هنگامی که message تغییر می‌کند، تابع message در watch اجرا می‌شود.
  • این تابع دو پارامتر می‌گیرد:
    • newValue: مقدار جدید داده
    • oldValue: مقدار قدیمی داده

ویژگی‌ها و کاربردهای watchers

۱. نظارت بر تغییرات داده‌ها

یکی از رایج‌ترین کاربردهای watchers نظارت بر تغییرات داده‌ها است. به عنوان مثال، اگر شما نیاز دارید که وقتی کاربر داده‌ای را وارد کرد، درخواست API جدیدی ارسال شود، می‌توانید از watcher برای این کار استفاده کنید.

مثال از استفاده از watcher برای ارسال درخواست API:

<template>
  <div>
    <input v-model="searchQuery" placeholder="جستجو کنید..." />
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  watch: {
    searchQuery(newQuery) {
      if (newQuery.length > 2) {
        this.fetchData(newQuery)
      }
    }
  },
  methods: {
    fetchData(query) {
      console.log(`در حال جستجو برای: ${query}`);
      // اینجا می‌توانید درخواست API ارسال کنید
    }
  }
}
</script>

در اینجا:

  • هر بار که searchQuery تغییر می‌کند و طول آن بیشتر از ۲ کاراکتر می‌شود، متد fetchData فراخوانی می‌شود.
  • این کد مثالی از استفاده از watcher برای انجام درخواست‌های API است.

۲. نظارت بر ویژگی‌های computed

شما همچنین می‌توانید از watchers برای نظارت بر تغییرات در computed properties استفاده کنید. این کار زمانی مفید است که بخواهید تغییرات در ویژگی‌های محاسبه‌شده را بررسی کنید.

مثال از استفاده از watcher برای نظارت بر computed property:

<template>
  <div>
    <p>مجموع: {{ total }}</p>
    <button @click="increaseCount">افزایش تعداد</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
      price: 50
    }
  },
  computed: {
    total() {
      return this.count * this.price
    }
  },
  watch: {
    total(newTotal) {
      console.log(`مجموع تغییر کرد: ${newTotal}`);
    }
  },
  methods: {
    increaseCount() {
      this.count++
    }
  }
}
</script>

در اینجا:

  • وقتی total تغییر کند (که وابسته به count و price است)، watcher آن را نظارت کرده و پیامی در کنسول نمایش می‌دهد.
  • این کد به‌طور خودکار تغییرات در محاسبه‌شده‌ها را شناسایی کرده و به آن‌ها واکنش نشان می‌دهد.

 

۳. نظارت بر تغییرات شیء یا آرایه

اگر یک شیء یا آرایه در داده‌ها دارید و بخواهید بر تغییرات در هر بخش از آن نظارت کنید، می‌توانید از watcher به‌طور خاص برای تغییرات در آرایه‌ها یا اشیاء استفاده کنید.

مثال نظارت بر تغییرات در شیء یا آرایه:

<template>
  <div>
    <button @click="addItem">افزودن آیتم به لیست</button>
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: ['آیتم 1', 'آیتم 2', 'آیتم 3']
    }
  },
  watch: {
    items(newItems) {
      console.log('لیست تغییر کرد:', newItems);
    }
  },
  methods: {
    addItem() {
      this.items.push('آیتم جدید');
    }
  }
}
</script>

در اینجا:

  • وقتی items تغییر کند (در این مثال با افزودن یک آیتم جدید)، watcher به‌طور خودکار اجرا می‌شود و تغییرات در آرایه را نظارت می‌کند.

ویژگی‌های اضافی در watchers

۱. استفاده از deep برای نظارت بر تغییرات داخلی اشیاء یا آرایه‌ها

وقتی که یک شیء پیچیده یا آرایه دارید و می‌خواهید تغییرات در هر بخش از آن را نظارت کنید (نه فقط تغییرات سطح بالای آن)، می‌توانید ویژگی deep را فعال کنید.

watch: {
  items: {
    handler(newItems) {
      console.log('تغییرات در آرایه:', newItems);
    },
    deep: true
  }
}

۲. استفاده از immediate برای اجرای فوری watcher

اگر می‌خواهید watcher بلافاصله پس از تعریف شدن اجرا شود (حتی اگر داده تغییر نکرده باشد)، می‌توانید از گزینه immediate استفاده کنید.

watch: {
  searchQuery: {
    handler(newQuery) {
      console.log('جستجو انجام شد:', newQuery);
    },
    immediate: true
  }
}

این گزینه باعث می‌شود که تابع watcher بلافاصله پس از بارگذاری کامپوننت اجرا شود.

جمع‌بندی

  • watchers برای نظارت بر تغییرات داده‌ها، computed properties و حتی اشیاء پیچیده در Vue.js استفاده می‌شوند.
  • watchers به شما این امکان را می‌دهند که در پاسخ به تغییرات داده‌ها، عملکرد خاصی را اجرا کنید (مانند ارسال درخواست API یا انجام محاسبات اضافی).
  • شما می‌توانید از گزینه‌های deep و immediate برای بهینه‌سازی نحوه نظارت استفاده کنید.