Kas yra 'watch' ir 'computed' Vue.js, ir kaip jie veikia?

stebėjimas (watch)

• Naudojamas reaktyvios savybės pakeitimo reakcijai.
• Leidžia atlikti asinchronines operacijas, atidėti vykdymą arba atlikti sudėtingus skaičiavimus, kai savybės reikšmė keičiasi.
• Konfigūruojama naudojant watch parinktį komponento viduje.
• Gali turėti parametrus handler (funkcija apdorotojas), deep (gili stebėsena vidinių objektų/masyvų) ir immediate (vykdyti apdorotoją kuriant komponentą).

Pavyzdys:

watch: {
  // Stebi `firstName` savybės pokytį
  firstName(newValue, oldValue) {
    console.log(`Vardas pasikeitė iš ${oldValue} į ${newValue}`);
  },
  // Giliai stebi `userInfo` objektą
  userInfo: {
    handler(newValue, oldValue) {
      console.log('Vartotojo informacija pasikeitė.');
    },
    deep: true
  }
}

apskaičiuotos savybės (computed)

• Naudojamos ** deklaratyviai kurti priklausomas reaguojančias duomenis**.
• Rezultatas kapsuliuojamas tol, kol nesikeičia jo priklausomybės.
• Skaičiuojama iš lėto, tik kai į ją kreipiamasi.
• Konfigūruojama naudojant computed parinktį komponento viduje.
• Turi grąžinti reikšmę.

Pavyzdys:

computed: {
  // Apskaičiuoja pilną vardą pagal `firstName` ir `lastName`
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  // Filtruoja naudotojų sąrašą
  filteredUsers() {
    return this.users.filter(user => user.isActive);
  }
}

Pagrindiniai skirtumai

Bruožas	watch	computed
Paskirtis	Reaguoti į savybės pokytį	Apskaičiuoti priklausomus duomenis
Kapsuliavimas	Ne	Taip (pagal priklausomybes)
Lėtas	Ne	Taip
Grąžinimo reikšmė	Ne (vykdo šalutinį efektą)	Taip (grąžina apskaičiuotą reikšmę)
Asinchroniškumas	Taip	Ne
Sintezė	Objekto su funkcijomis apdorojėjais	Objekto su funkcijomis, grąžinančiomis reikšmę

Naudokite computed gauti reaguojančius duomenis, kurie yra išvestiniai iš kitų duomenų. Naudokite watch vykdyti šalutinius efektus (pvz., API skambučius, DOM pakeitimus), kai keičiasi reaguojančios savybės reikšmė, arba vykdyti sudėtingesnes logines reakcijas.