Τι είναι το 'watch' και το 'computed' στο Vue.js, και πώς λειτουργούν;

watch (παρατηρητές)

• Χρησιμοποιείται για να αντιδράσει σε αλλαγές σε μια συγκεκριμένη αντιδραστική ιδιότητα.
• Επιτρέπει την εκτέλεση ασύγχρονων λειτουργιών, την καθυστέρηση της εκτέλεσης ή την εκτέλεση πολύπλοκων υπολογισμών όταν αλλάζει η τιμή της ιδιότητας.
• Ρυθμίζεται με την επιλογή watch μέσα στο συστατικό.
• Μπορεί να έχει παραμέτρους όπως handler (λειτουργία χειριστή), deep (βαθιά παρατήρηση των εσωτερικών αντικειμένων/απείρων) και immediate (εκτέλεση του χειριστή κατά τη δημιουργία του συστατικού).

Παράδειγμα:

watch: {
  // Παρακολουθεί την αλλαγή της ιδιότητας `firstName`
  firstName(newValue, oldValue) {
    console.log(`Το όνομα άλλαξε από ${oldValue} σε ${newValue}`);
  },
  // Βαθιά παρακολουθεί το αντικείμενο `userInfo`
  userInfo: {
    handler(newValue, oldValue) {
      console.log('Οι πληροφορίες χρήστη έχουν αλλάξει.');
    },
    deep: true
  }
}

computed (υπολογιζόμενα χαρακτηριστικά)

• Χρησιμοποιείται για να δημιουργήσει δηλωτικά εξαρτώμενα αντιδραστικά δεδομένα.
• Το αποτέλεσμα αποθηκεύεται στην cache μέχρι να αλλάξουν οι εξαρτώμενες αντιδραστικές εξαρτήσεις.
• Υπολογίζεται τεμπέλικα, μόνο όταν ζητηθεί.
• Ρυθμίζεται με την επιλογή computed μέσα στο συστατικό.
• Πρέπει να επιστρέφει μια τιμή.

Παράδειγμα:

computed: {
  // Υπολογίζει το πλήρες όνομα με βάση το firstName και το lastName
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  // Φιλτράρει τη λίστα χρηστών
  filteredUsers() {
    return this.users.filter(user => user.isActive);
  }
}

Βασικές διαφορές

Χαρακτηριστικό	watch	computed
Σκοπός	Να αντιδράσει στην αλλαγή μιας ιδιότητας	Να υπολογίζει εξαρτώμενα δεδομένα
Cache	Όχι	Ναι (ανάλογα με τις εξαρτήσεις)
Τεμπέλικο	Όχι	Ναι
Τιμή επιστροφής	Όχι (εκτελεί παρενέργειες)	Ναι (επιστρέφει τον υπολογισμένο)
Ασύγχρονο	Ναι	Όχι
Σύνταξη	Αντικείμενο με λειτουργίες χειριστές	Αντικείμενο με λειτουργίες που επιστρέφουν τιμές

Χρησιμοποιήστε το computed για να λαμβάνετε αντιδραστικά δεδομένα που προκύπτουν από άλλα δεδομένα. Χρησιμοποιήστε το watch για την εκτέλεση παρενεργειών (π.χ. κλήσεις API, αλλαγές στο DOM) όταν αλλάζει η τιμή μιας αντιδραστικής ιδιότητας, ή για την εκτέλεση πιο σύνθετων αντιδράσεων.