Mi az a 'watch' és a 'computed' a Vue.js-ben, és hogyan működnek?

watch (figyelők)

• Egy adott reaktív tulajdonság változására reakciót alkalmaz.
• Lehetővé teszi aszinkron műveletek végrehajtását, a végrehajtás késleltetését vagy összetettebb számításokat, amikor a tulajdonság értéke megváltozik.
• A komponensen belül az watch opcióval konfigurálható.
• Lehet paramétere handler (kezelőfüggvény), deep (mély megfigyelés beágyazott objektumokra/ tömbökre) és immediate (a kezelőfüggvény azonnali futtatása a komponens létrehozásakor).

Példa:

watch: {
  // Figyeli a `firstName` tulajdonság változását
  firstName(newValue, oldValue) {
    console.log(`A név ${oldValue} -ról ${newValue} -re változott`);
  },
  // Mély megfigyelés az `userInfo` objektumon
  userInfo: {
    handler(newValue, oldValue) {
      console.log('A felhasználói információk megváltoztak.');
    },
    deep: true
  }
}

computed (számított tulajdonságok)

• Olyan deklaratív módon létrehozott függő reaktív adatok esetén használható.
• Az eredmény gyorsítótárazva van mindaddig, amíg a függőségek nem változnak.
• Lazán számítódik, csak akkor, amikor hozzáférnek.
• A komponensen belül az computed opcióval konfigurálható.
• Vissza kell adnia egy értéket.

Példa:

computed: {
  // A teljes nevet a `firstName` és `lastName` alapján számítja ki
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  // Szűri a felhasználók listáját
  filteredUsers() {
    return this.users.filter(user => user.isActive);
  }
}

Fő különbségek

Jellemző	watch	computed
Cél	Egy tulajdonság változására reagálni	Függő adatok számítása
Gyorsítótár	Nem	Igen (függőségek szerint)
Lazán számítódik	Nem	Igen
Visszatérési érték	Nem (mellékhatásokat hajt végre)	Igen (számított értéket ad vissza)
Aszinkron	Igen	Nem
Szintaxis	Objektum handler függvényekkel	Objektum függvényekkel, amelyek értékeket adnak vissza

Használja a computed-et reaktív adatok szerzése érdekében, amelyek más adatokból származnak. A watch-ot használja mellékhatások végrehajtására (pl. API hívások, DOM módosítások), amikor egy reaktív tulajdonság értéke megváltozik, vagy összetettebb logikai reakciók végrehajtására.