Η αντιδραστικότητα του Vue 3 βασίζεται στο JavaScript Proxies. Όταν κάνετε μια κατάσταση αντιδραστική, το Vue την τυλίγει σε ένα Proxy που παγιδεύει τις ενέργειες ανάγνωσης και γραφής, επιτρέπει την παρακολούθηση ποιων εφέ εξαρτώνται από ποιες ιδιότητες, και ενεργοποιεί εκείνα τα εφέ να εκτελεστούν ξανά όταν τα δεδομένα αλλάξουν.
// a simplified mental model of reactive()
function reactive(target) {
return new Proxy(target, {
get(obj, key) {
track(obj, key); // record "the current effect depends on obj.key"
return obj[key];
},
set(obj, key, value) {
obj[key] = value;
trigger(obj, key); // re-run every effect that depended on obj.key
return true;
},
});
}
Η ανάγνωση μιας ιδιότητας παρακολουθεί το τρέχον εφέ που εκτελείται ως εξάρτηση. η γραφή της ενεργοποιεί όλα τα εφέ που την διαβάζουν. Έτσι γνωρίζει το Vue ακριβώς ποιο στοιχείο θα αποδοθεί ή ποιες computed τιμές θα ενημερωθούν όταν αλλάξει μια συγκεκριμένη ιδιότητα.
// component render, computed, and watchers all run inside an "effect"
effect(() => {
document.body.innerHTML = count.value; // reading count.value tracks this effect
});
count.value++; // triggers the effect → it re-runs → DOM updates
Όταν εκτελείται ένα εφέ, το Vue το σημειώνει ως "ενεργό" έτσι ώστε όλες οι αντιδραστικές αναγνώσεις κατά τη διάρκειά του να συνδεθούν πίσω σε αυτό. Αλλάξτε μια εξάρτηση αργότερα και μόνο τα εφέ που επηρεάζονται θα εκτελεστούν ξανά.
// Vue 2 used Object.defineProperty per-property, which COULDN'T detect:
this.obj.newProp = 1; // ❌ adding a new property (needed Vue.set)
this.arr[0] = 5; // ❌ index assignment
this.arr.length = 0; // ❌ length changes
// Vue 3's Proxy intercepts ALL operations, including new keys, deletes, and arrays ✅
Τα Proxies παγιδεύουν ολόκληρο το αντικείμενο (οποιοδήποτε κλειδί, προσθήκες, διαγραφές, μεταλλάξεις πίνακα), αφαιρώντας τις γνωστές προειδοποιήσεις του Vue 2 — χωρίς άλλη χρήση Vue.set.
reactive(obj) → returns a Proxy of the object
ref(value) → returns an object { value } whose .value access is tracked
(so primitives can be reactive — Proxies only wrap objects)
Η κατανόηση του μοντέλου track/trigger Proxy εξηγεί γιατί το Vue είναι τόσο αποδοτικό (ενημερώνει μόνο τα εφέ που πραγματικά εξαρτώνται από τα δεδομένα που άλλαξαν — λεπτοδύναμη αντιδραστικότητα) και γιατί οι παλιοί περιορισμοί του Vue 2 υπήρχαν και εξαφανίστηκαν στο Vue 3.
Εξηγεί επίσης πρακτικούς κανόνες: γιατί το reactive χρειάζεται αντικείμενα (τα Proxies δεν μπορούν να περιτυλίξουν πρωτόγονα, συνεπώς ref), και γιατί η αποδόμηση του reactive διακόπτει την παρακολούθηση (αποσυνδέετε την τιμή από την αναχαίτηση get/set του Proxy).