Ποια είναι η διαφορά μεταξύ watch και watchEffect;

Question

Accepted Answer

Και τα δύο εκτελούν side effects ως απόκριση σε αντιδραστικές αλλαγές, αλλά διαφέρουν στον τρόπο που καθορίζονται οι εξαρτήσεις και ποιες πληροφορίες σας δίνουν. Χρησιμοποιήστε τα για side effects (κλήσεις API, logging, χειручική εργασία DOM) — **όχι** για παραγωγή τιμών (αυτό είναι `computed`). ## watch — ρητή πηγή, δίνει παλιές + νέες τιμές ```vue ``` `watch` παρακολουθεί μια **συγκεκριμένη** πηγή που ονοματοδοτείτε, εκτελεί το callback μόνο όταν η πηγή αλλάζει, και παρέχει τις **παλιές και νέες τιμές** — χρήσιμο όταν πρέπει να τις συγκρίνετε ή να αντιδράσετε σε ένα συγκεκριμένο μέρος της κατάστασης. ## watchEffect — αυτόματη παρακολούθηση εξαρτήσεων, εκτελείται αμέσως ```vue ``` `watchEffect` **παρακολουθεί αυτόματα** κάθε αντιδραστική τιμή που χρησιμοποιείται στο εσωτερικό του (χωρίς λίστα πηγών) και εκτελείται **αμέσως κατά την εγκατάσταση** (στη συνέχεια εκτελείται ξανά σε οποιαδήποτε αλλαγή εξάρτησης). Χωρίς παλιές/νέες τιμές. ## Δίπλα-δίπλα ```text watch watchEffect Dependencies explicit (you name them) automatic (tracked from usage) Runs immediately? no (unless immediate:true) yes Old + new values? yes no Best for reacting to specific state, running an effect that depends needing prev value on several values ``` ## Χρήσιμες επιλογές watch ```js watch(source, cb, { immediate: true, // run once right away (like watchEffect) deep: true, // watch nested object changes }); watch([a, b], ([newA, newB]) => {}); // watch multiple sources ``` ## Γιατί έχει σημασία Η επιλογή του σωστού εργαλείου κρατά τα αντιδραστικά side effects καθαρά: χρησιμοποιήστε **`computed`** για προκύπτουσες τιμές, **`watch`** όταν πρέπει να αντιδράσετε σε μια συγκεκριμένη πηγή ή να συγκρίνετε παλιές/νέες (π.χ. fetch όταν αλλάζει ένα id), και **`watchEffect`** για εφέ που εξαρτώνται από πολλές τιμές και πρέπει να τις παρακολουθούν αυτόματα. Η κακή χρήση των watchers για παραγωγή (αντί `computed`) είναι ένα κοινό anti-pattern.