ორივე ქმნის რეაქტიული მდგომარეობას Composition API-ში, მაგრამ სხვადსხვა გზით მუშაობს. ref აფუთებს რომელიმე მნიშვნელობას (მათ შორის პრიმიტივებს) რეაქტიული კონტეინერში; reactive ღრმად აკეთებს ობიექტს რეაქტიულ პირდაპირ.
ორივე ქმნის რეაქტიული მდგომარეობას Composition API-ში, მაგრამ სხვადსხვა გზით მუშაობს. ref აფუთებს რომელიმე მნიშვნელობას (მათ შორის პრიმიტივებს) რეაქტიული კონტეინერში; 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 მხოლოდ ობიექტებზე/მასივებზე მუშაობს (არა პრიმიტივებზე) და თვისებებს პირდაპირ იყენებთ.
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 Vue 3-ის Composition API-ის მდგომარეობის საფუძველია.
ისე, რომ გესმოდეთ, რომ ref-ს საჭიროა .value script-ში (ავტომატურად ხსნილი template-ში) და რომ reactive კარგავს რეაქტიულობას ხელახლა დაწერის/დესტრუქტურირების დროს, ეს თავს იზღვავს Vue-ში ორი ყველაზე გავრცელებული რეაქტიულობის ბაგიდან.