Και τα δύο δημιουργούν αντιδραστική κατάσταση στο Composition API, αλλά λειτουργούν διαφορετικά. Το ref τυλίγει οποιαδήποτε τιμή (συμπεριλαμβανομένων των primitives) σε ένα αντιδραστικό κοντέινερ· το reactive κάνει ένα αντικείμενο βαθιά αντιδραστικό απευθείας.
<script setup>
import { ref } from "vue";
const count = ref(0); // wraps a primitive
const user = ref({ name: "Ann" });
function inc() {
count.value++; // ⚠️ in SCRIPT you must use .value
user.value.name = "Bob";
}
</script>
<template>
<p>{{ count }}</p> <!-- ✅ in TEMPLATE, .value is auto-unwrapped -->
</template>
Η κύρια περιπλοκή: στο JavaScript έχετε πρόσβαση σε ένα ref μέσω .value· στο template το Vue το ξεδιπλώνει αυτόματα. Το να ξεχάσετε το .value στο script είναι το πιο συνηθισμένο λάθος αρχαρίων.
<script setup>
import { reactive } from "vue";
const state = reactive({ count: 0, user: { name: "Ann" } });
state.count++; // ✅ access directly, no .value
state.user.name = "Bob"; // deeply reactive
</script>
Το reactive λειτουργεί μόνο σε αντικείμενα/πίνακες (όχι σε primitives) και χρησιμοποιείτε τις ιδιότητες απευθείας.
let state = reactive({ count: 0 });
state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy)
const { count } = state; // ❌ destructuring loses reactivity
Η αναθέτηση ενός αντικειμένου reactive ή η αποδόμηση των ιδιοτήτων του διακόπτει τη σύνδεσή τους με την αντιδραστικότητα — ένα συχνό παγίδα. Το ref δεν έχει αυτό το πρόβλημα (αναθέτετε .value).
ref → primitives, and the recommended default (works for everything, easy to reassign)
reactive→ when you want a grouped object of state without .value (but mind destructuring)
Πολλές ομάδες τυποποιούν σε ref παντού για συνέπεια.
Το ref και το reactive είναι η βάση της αντιδραστικής κατάστασης του Composition API του Vue 3.
Η κατανόηση ότι το ref χρειάζεται .value στο script (αυτόματα ξεδιπλωμένο στα templates) και ότι το reactive χάνει την αντιδραστικότητα κατά την αναθέτηση/αποδόμηση αποτρέπει τα δύο πιο συνηθισμένα σφάλματα αντιδραστικότητας στο Vue.