ref() och reactive()
Skapa reaktiva primitiva värden med ref(), omslut objekt med reactive() och förstå när respektive funktion ska användas samt hur ref-värden nås via .value.
ref() och reactive() är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Reaktivitet i Vue 3
Vue 3:s Composition API använder reaktiva primitiver för att spåra tillstånd. Två centrala funktioner är ref() för primitiva värden och reactive() för objekt. Ändringar i dessa uppdaterar automatiskt användargränssnittet.
ref() för primitiva värden
ref(value) omsluter ett värde i en reaktiv behållare. Läs och ändra värdet via .value i script. I templates packar Vue automatiskt upp refs – .value behövs inte.
<script setup>
import { ref } from 'vue';
const count = ref(0);
const name = ref('Alice');
function increment() {
count.value++; // .value in script
}
</script>
<template>
<p>{{ count }}</p> <!-- no .value in template -->
<button @click="increment">+</button>
</template>reactive() för objekt
reactive(object) returnerar en djupt reaktiv proxy för objektet. Ni kommer åt egenskaper direkt – .value behövs inte någonstans.
<script setup>
import { reactive } from 'vue';
const form = reactive({
email: '',
password: '',
rememberMe: false
});
// Mutate directly:
form.email = 'user@example.com';
</script>
<template>
<input v-model="form.email">
</template>ref jämfört med reactive – när ska ni använda vad?
Använd ref() för: primitiva värden (string, number, boolean), nullbara värden och returvärden från composables (enklare att destrukturera). Använd reactive() för relaterade data som hör ihop i ett objekt.
Fallgrop vid destrukturering av reactive()
Destrukturering av ett reaktivt objekt gör att reaktiviteten förloras, eftersom de extraherade egenskaperna är vanliga värden och inte reaktiva refs.
const state = reactive({ count: 0 });
const { count } = state; // NOT reactive
count++; // doesn't update Vue's tracking
// Fix: use toRefs() to destructure reactively:
import { toRefs } from 'vue';
const { count } = toRefs(state); // count is now a ref
count.value++;toRef och toRefs
toRef(obj, 'key') skapar en ref som är länkad till en egenskap. toRefs(obj) konverterar alla egenskaper i ett reaktivt objekt till individuella länkade refs – säkert att destrukturera.
import { toRefs } from 'vue';
const user = reactive({ name: 'Alice', age: 30 });
const { name, age } = toRefs(user);
// name and age are refs, still linked to user
name.value = 'Bob'; // user.name also becomes 'Bob'ref() för DOM-element
Använd ref(null) tillsammans med ett matchande ref-attribut i template för att få en reaktiv referens till ett DOM-element eller en underordnad komponentinstans.
<script setup>
import { ref, onMounted } from 'vue';
const inputEl = ref<HTMLInputElement | null>(null);
onMounted(() => {
inputEl.value?.focus(); // now the DOM element is available
});
</script>
<template>
<input ref="inputEl" type="text">
</template>isRef och unref
isRef(val) kontrollerar om ett värde är en ref. unref(val) packar upp en ref eller returnerar värdet som det är om det inte är en ref. Användbart i composables som accepterar både refs och vanliga värden.
import { isRef, unref } from 'vue';
function double(val: Ref<number> | number) {
return unref(val) * 2; // works with both ref and plain number
}shallowRef och shallowReactive
shallowRef() är endast reaktiv på toppnivån, inte djupt. shallowReactive() fungerar på samma sätt för objekt. Använd dem för prestandaoptimering när djup reaktivitet inte behövs, till exempel för stora oföränderliga datastrukturer.
Ändra reactive() jämfört med att ersätta
Med reactive() ändrar ni egenskaper direkt. Ni kan inte ersätta hela objektet – reactive() behöver samma referens. Använd ref() om objektet ska ersättas; då kan ni använda ref.value = newObject.
const state = reactive({ items: [] });
state.items.push(newItem); // OK
state.items = [newItem]; // also OK (mutating the property)
// state = reactive({ items: [newItem] }); // LOSES REACTIVITY — can't reassignDjup reaktivitet
reactive() är djupt reaktiv som standard – Vue spårar ändringar i nästlade objekt och arrayer. Det är praktiskt men kan vara kostsamt för mycket stora objekt. Överväg shallowReactive i prestandakänsliga fall.
Snabbkontroll
Varför förlorar ett reactive()-objekt sin reaktivitet när det destruktureras?
Sammanfattning: ref() och reactive()
ref() omsluter primitiva värden; använd .value i script, där refs packas upp automatiskt i templates. reactive() gör objekt djupt reaktiva; ändra egenskaper direkt. Destrukturering förlorar reaktiviteten – använd toRefs(). Använd ref(null) för referenser till template-element. shallowRef/shallowReactive används för prestanda. isRef/unref används som verktyg i composables.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”ref() och reactive()” gratis?
Ja – hela texten till ”ref() och reactive()” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”ref() och reactive()”?
Skapa reaktiva primitiva värden med ref(), omslut objekt med reactive() och förstå när respektive funktion ska användas samt hur ref-värden nås via .value. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?
Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”ref() och reactive()”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Frontend Academy-lektionen?
Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- ref() och reactive()
- computed() och watch()
- Funktionen setup() och script setup
- Composables: återanvändbara Composition-funktioner