Vue.js'da 'watch' va 'computed' nima va ular qanday ishlaydi?

watch (kuzatuvchilar)

• Ma'lum bir reaktiv xususiyat o'zgarishiga reaktsiya qilish uchun ishlatiladi.
• Asinxron operatsiyalarni bajarishga, bajarilishini kechiktirishga yoki murakkab hisoblashlar qilishga imkon beradi, xususiyat qiymati o'zgarganda.
• Komponent ichida watch opsiyasi yordamida sozlanadi.
• handler (xatti-harakat funksiyasi), deep (ichki ob'ektlar/arraylarni chuqur kuzatish) va immediate (komponent yaratilganda xatti-harakatni bajarish) parametrlariga ega bo'lishi mumkin.

Misol:

watch: {
  // `firstName` xususiyatining o'zgarishini kuzatadi
  firstName(newValue, oldValue) {
    console.log(`Ism ${oldValue} dan ${newValue} gacha o'zgardi`);
  },
  // `userInfo` ob'ektini chuqur kuzatadi
  userInfo: {
    handler(newValue, oldValue) {
      console.log('Foydalanuvchi haqida maʼlumot oʼzgardi.');
    },
    deep: true
  }
}

computed (hisoblangan xususiyatlar)

• Boshqa ma'lumotlarga bog'liq bo'lgan reaktiv ma'lumotlarni deklarativ tarzda yaratish uchun ishlatiladi.
• Natija keshga olinadi va uning reaktiv bog'liqlari o'zgarmaguncha saqlanadi.
• Lazily hisoblanadi, faqat unga murojaat qilinsa.
• Komponent ichida computed opsiyasi yordamida sozlanadi.
• Qaytarishi kerak.

Misol:

computed: {
  // `firstName` va `lastName` asosida to'liq ismni hisoblaydi
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  // Foydalanuvchilar ro'yxatini filtrlash
  filteredUsers() {
    return this.users.filter(user => user.isActive);
  }
}

Asosiy farqlar

Xususiyat	watch	computed
Ma'nosi	Xususiyat o'zgarishiga reaksiya qilish	Bog'liq ma'lumotlarni hisoblash
Kesh	Yo'q	Ha (bog'liqliklarga qarab)
Lazily	Yo'q	Ha
Qaytargan qiymat	Yo'q (yon ta'sirlarni bajaradi)	Ha (hisoblangan qiymatni qaytaradi)
Asinxron	Ha	Yo'q
Sintaksis	Funksiyalar bilan ob'ekt	Qiymat qaytaradigan funksiyalar bilan ob'ekt

computed yordamida boshqa ma'lumotlardan kelib chiqadigan reaktiv ma'lumotlarni oling. watch yordamida, reaktiv xususiyat qiymati o'zgarganda, yon ta'sirlarni (masalan, API chaqiriqlari, DOM o'zgarishlari) bajarish yoki murakkabroq mantiqiy reaktsiyalarni amalga oshirish uchun foydalaning.