Mis on 'watch' ja 'computed' Vue.js-s ning kuidas nad töötavad?

watch (vaatlejad)

• Kasutatakse reaktiivse omaduse muutustele reageerimiseks.
• Võimaldab teha asünkroonseid operatsioone, viivitada täitmist või teha keerukaid arvutusi, kui omaduse väärtus muutub.
• Konfigureeritakse komponendi sees watch valikuga.
• Võib omada parameetreid handler (funktsioon-töötleja), deep (sügav jälgimine sisemiste objektide/maatriksite jaoks) ja immediate (töötleja käivitamine komponendi loomisel).

Näide:

watch: {
  // Jälgib `firstName` omaduse muutust
  firstName(newValue, oldValue) {
    console.log(`Nimi muutus ${oldValue}lt ${newValue}le`);
  },
  // Sügav jälgimine `userInfo` objektile
  userInfo: {
    handler(newValue, oldValue) {
      console.log('Kasutaja teave muutus.');
    },
    deep: true
  }
}

arvutatud omadused (computed)

• Kasutatakse sõnalise sõltuvuse loomise jaoks.
• Tulemus salvestatakse vahemällu kuni sõltuvused muutuvad.
• Arvutatakse hoolikalt, ainult kui sellele viidatakse.
• Konfigureeritakse computed valikuga.
• Peab tagastama väärtuse.

Näide:

computed: {
  // Arvutab täisnime `firstName` ja `lastName` põhjal
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  // Filtreerib kasutajate nimekirja
  filteredUsers() {
    return this.users.filter(user => user.isActive);
  }
}

Peamised erinevused

Omadus	watch	computed
Eesmärk	Reageerida omaduse muutusele	Arvutada sõltuvad andmed
Välimus	Ei	Jah (sõltuvuste järgi)
Hooldus	Ei	Jah
Tagastatav väärtus	Ei (teeb kõrvaltoimeid)	Jah (tagastab arvutatud väärtuse)
Asünkroonsus	Jah	Ei
Süntaks	Objekt funktsioonidega- töötlejad	Objekt funktsioonidega, mis tagastavad väärtuse

Kasutage computed, et saada reaktiivseid andmeid, mis on teistest andmetest tuletatud. Kasutage watch, et teha kõrvaltoimeid (näiteks API kutsed, DOM-i muudatused), kui reaktiivse omaduse väärtus muutub, või et teha keerukamaid loogilisi reaktsioone.