درک و استفاده از Watchers در Vue.js | آموزش Watch با مثال کاربردی

در Vue.js، Watchers ابزاری برای نظارت بر تغییرات در داده‌ها و اجرای کدهای خاص در پاسخ به این تغییرات هستند. Watchers به شما اجازه می‌دهند به‌صورت خودکار واکنش‌هایی را به تغییرات در متغیرها یا داده‌های خاص انجام دهید و از این طریق عملکردهای پیچیده‌تری را پیاده‌سازی کنید. در این مقاله با مفهوم Watchers، نحوه پیاده‌سازی آن‌ها و موارد استفاده رایج آشنا می‌شویم.

مفهوم Watcher در Vue.js

Watcher‌ها در Vue.js مانند یک "ناظر" بر روی داده‌ها عمل می‌کنند و هرگاه مقدار آن داده‌ها تغییر کند، بلافاصله کدهای مشخص‌شده را اجرا می‌کنند. این ابزار به ویژه زمانی که نیاز به انجام عملیات پس از تغییر داده دارید، مانند فراخوانی API، اعتبارسنجی داده‌ها و به‌روزرسانی رابط کاربری به صورت پویا، بسیار کاربردی است.

نحوه تعریف و استفاده از Watcher

Watchers در داخل شیء watch در یک کامپوننت Vue تعریف می‌شوند و هر Watcher نام داده‌ای را که باید نظارت شود به عنوان کلید و یک تابع به عنوان مقدار دریافت می‌کند.

مثال ساده از Watcher:

< div id = " app " >
  < input v-model = " name " placeholder = " Enter your name " / >
  < p > { { greeting } } < / p >
< / div >

  new Vue ( {
    el: ' #app ' ,
    data ( ) {
      return {
        name: ' ' ,
        greeting : ' '
      } ;
    } ,
    watch : {
      name ( newName ) {
        this.greeting = ` Hello , $ { newName } ! ` ;
      }
    }
  } ) ;

در این مثال:

• Watcher name بر تغییرات مقدار name نظارت می‌کند.

• هر بار که name تغییر کند، Watcher مقدار greeting را به‌روزرسانی می‌کند.

پارامترهای Watcher

Watcher‌ها به‌طور خودکار دو پارامتر newValue و oldValue را دریافت می‌کنند که به ترتیب مقدار جدید و مقدار قبلی داده نظارت‌شده هستند. این پارامترها به شما اجازه می‌دهند بر اساس تغییرات بین دو مقدار، واکنش مناسبی انجام دهید.

مثال استفاده از newValue و oldValue:

< div id = " app " >
  < input v-model = " counter " type = " number " / >
  < p > { { message } } < / p >
< / div >

  new Vue ( {
    el: ' #app ' ,
    data ( ) {
      return {
        counter : 0 ,
        message : ' '
      } ;
    } ,
    watch : {
      counter ( newVal , oldVal ) {
        this.message = ` Counter changed from $ { oldVal } to $ { newVal } ` ;
      }
    }
  } ) ;

در این مثال، هر بار که counter تغییر کند، Watcher تفاوت بین مقدار جدید و قبلی را در پیام message نشان می‌دهد.

Watchers برای نظارت بر شیء‌ها و آرایه‌ها

در صورتی که داده‌ای که می‌خواهید بر آن نظارت کنید، یک شیء یا آرایه باشد، می‌توانید از گزینه deep: true استفاده کنید تا Watcher بر تغییرات داخل شیء یا آرایه نظارت کند.

مثال: نظارت بر یک شیء با deep

< div id = " app " >
  < button @click = " updateUser " > Update User < / button >
  < p > { { user } } < / p >
< / div >

  new Vue ( {
    el : ' #app ' ,
    data ( ) {
      return {
        user : {
          name : ' John ' ,
          age : 30
        }
      } ;
    } ,
    methods : {
      updateUser ( ) {
        this.user.age++ ;
      }
    } ,
    watch : {
      user : {
        handler ( newVal ) {
          console.log ( ' User data changed: ' , newVal ) ;
        } ,
        deep : true
      }
    }
  } ) ;

در این مثال:

• Watcher user به‌صورت deep تعریف شده است و در نتیجه بر تغییرات داخلی شیء user نظارت می‌کند.

• هر بار که ویژگی age در user تغییر کند، Watcher فعال شده و پیام تغییرات را به کنسول چاپ می‌کند.

Watchers و عملیات غیرهمزمان (Async)

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

مثال استفاده از عملیات غیرهمزمان در Watcher

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

  new Vue ( {
    el : ' #app ' ,
    data ( ) {
      return {
        searchTerm : ' ' ,
        results : [ ]
      } ;
    } ,
    watch : {
      searchTerm : async function ( newTerm ) {
        if ( newTerm ) {
          const response = await fetch( ` https://api.example.com/search?q=${newTerm} ` ) ;
          const data = await response.json ( ) ;
          this.results = data.results ;
        } else {
          this.results = [ ] ;
        }
      }
    }
  } ) ;

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

زمانبندی و بهینه‌سازی Watchers

در مواقعی که داده به سرعت تغییر می‌کند (مانند تایپ سریع در یک فیلد)، می‌توانید از دی‌بونسیگ (Debouncing) استفاده کنید تا عملیات تکراری و غیرضروری کاهش یابد. با استفاده از setTimeout می‌توانید تغییرات متوالی را مدیریت کنید.

مثال دی‌بونسیگ Watcher:

watch : {
  searchTerm ( newTerm ) {
    clearTimeout ( this.debounce ) ;
    this.debounce = setTimeout( async () => {
      if ( newTerm ) {
        const response = await fetch( ` https://api.example.com/search?q=${newTerm} ` ) ;
        const data = await response.json ( ) ;
        this.results = data.results ;
      } else {
        this.results = [ ] ;
      }
    } , 300 ); // تاخیر 300 میلی‌ثانیه برای کاهش فراخوانی‌های اضافی
  }
}

در این مثال، هر بار که searchTerm تغییر کند، تایمر debounce بازنشانی می‌شود و پس از 300 میلی‌ثانیه عملیات جستجو انجام می‌شود. این کار باعث کاهش تعداد درخواست‌های API می‌شود.

بهترین شیوه‌ها در استفاده از Watchers

• استفاده از Watchers برای عملیات خاص: Watchers برای عملیات‌های واکنشی مانند فراخوانی API یا نظارت بر تغییرات پیچیده بسیار مناسب‌اند. برای تغییرات ساده در داده‌ها، استفاده از computed properties ممکن است بهینه‌تر باشد.

• استفاده از deep: true با دقت: deep: true می‌تواند منجر به کاهش کارایی شود، زیرا هرگونه تغییر در یک شیء یا آرایه را تحت نظر می‌گیرد. در صورت امکان، از این ویژگی با احتیاط و فقط برای نظارت بر اشیاء بزرگ استفاده کنید.

• دی‌بونسیگ (Debouncing) برای ورودی‌های متوالی: در صورتی که Watcher برای فیلدهای متنی یا ورودی‌های کاربر تعریف شده، از دی‌بونسیگ برای کاهش تعداد درخواست‌ها و افزایش کارایی استفاده کنید.

نتیجه‌گیری

Watchers در Vue.js ابزاری قدرتمند برای نظارت بر تغییرات در داده‌ها و انجام عملیات‌های مختلف مانند فراخوانی API و به‌روزرسانی رابط کاربری است. با درک صحیح از نحوه کار و بهترین شیوه‌های استفاده از Watchers، می‌توانید پروژه‌های Vue.js خود را بهبود داده و عملکرد برنامه را بهینه کنید.