Vue.js-də 'watch' və 'computed' nədir və necə işləyirlər?

watch (nəzarətçilər)

• Müəyyən bir reaktiv xüsusiyyətin dəyişməsinə reaksiya vermək üçün istifadə olunur.
• Asinxron əməliyyatlar həyata keçirməyə, icraatı gecikdirməyə və ya mürəkkəb hesablamalar etməyə imkan verir, xüsusiyyətin dəyəri dəyişdikdə.
• Komponent daxilində watch seçimi ilə konfiqurasiya edilir.
• handler (emalçı funksiyası), deep (dərin müşahidə, iç içə obyektlər/array-lər üçün) və immediate (komponent yaradıldıqda emalçı funksiyanı icra etmək) parametrlərinə sahib ola bilər.

Misal:

watch: {
  // `firstName` xüsusiyyətindəki dəyişiklikləri müşahidə edir
  firstName(newValue, oldValue) {
    console.log(`Ad ${oldValue} dən ${newValue} ə dəyişdi`);
  },
  // `userInfo` obyektini dərindən müşahidə edir
  userInfo: {
    handler(newValue, oldValue) {
      console.log('İstifadəçi haqqında məlumat dəyişdi.');
    },
    deep: true
  }
}

computed (hesablanan xüsusiyyətlər)

• Başqa məlumatlara bağlı reaktiv məlumatları deklarativ şəkildə yaratmaq üçün istifadə olunur.
• Nəticə keşdə saxlanılır və onun reaktiv asılılıqları dəyişənə qədər saxlanılır.
• Lazily hesablanır, yalnız ona müraciət edildikdə.
• Komponent daxilində computed seçimi ilə konfiqurasiya edilir.
• Dəyər qaytarmalıdır.

Misal:

computed: {
  // `firstName` və `lastName` əsasında tam adı hesablayır
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  // İstifadəçi siyahısını filtrləyir
  filteredUsers() {
    return this.users.filter(user => user.isActive);
  }
}

Əsas fərqlər

Xüsusiyyət	watch	computed
Məqsəd	Bir xüsusiyyətin dəyişməsinə reaksiya vermək	Asılı məlumatları hesablamaq
Keş	Yox	Bəli (asılılıqlara görə)
Lazily	Yox	Bəli
Dəyər	Yox (yan təsirlər yerinə yetirir)	Bəli (hesablanmış dəyəri qaytarır)
Asinxron	Bəli	Yox
Sintaksis	Funksiyaları olan obyekt	Dəyər qaytaran funksiyaları olan obyekt

computed istifadə edərək digər məlumatlardan törədilmiş reaktiv məlumatlar əldə edin. watch istifadə edərək, reaktiv xüsusiyyətin dəyəri dəyişdikdə yan təsirləri (məsələn, API çağırışları, DOM dəyişiklikləri) həyata keçirin və ya daha mürəkkəb məntiq reaksiyaları icra edin.