0Pricing
Frontend Academy · Lekcja

ref() i reactive()

Proszę tworzyć reaktywne wartości proste za pomocą ref(), opakowywać obiekty przez reactive() oraz zrozumieć, kiedy używać każdej z tych funkcji i jak uzyskiwać dostęp do wartości ref przez .value.

ref() i reactive() to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Reaktywność w Vue 3

Composition API w Vue 3 używa reaktywnych mechanizmów do śledzenia stanu. Dwie kluczowe funkcje to ref() dla wartości prostych oraz reactive() dla obiektów. Zmiany tych wartości automatycznie aktualizują interfejs użytkownika.

ref() dla wartości prostych

ref(value) opakowuje wartość w reaktywny kontener. W skrypcie dostęp do wartości i jej modyfikowanie odbywa się za pomocą .value. W szablonach Vue automatycznie rozwija refy — nie trzeba używać .value.

<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() dla obiektów

reactive(object) zwraca głęboko reaktywny proxy obiektu. Do właściwości uzyskuje się dostęp bezpośrednio — nie trzeba używać .value.

<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 a reactive — kiedy czego używać

Proszę używać ref() dla: wartości prostych (string, number, boolean), wartości dopuszczających null oraz wartości zwracanych z composable (łatwiejsze rozpakowywanie). Proszę używać reactive() dla powiązanych danych, które należą do jednego obiektu.

Pułapka rozpakowywania reactive()

Rozpakowanie reaktywnego obiektu powoduje utratę reaktywności, ponieważ wyodrębnione właściwości są zwykłymi wartościami, a nie reaktywnymi refami.

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 i toRefs

toRef(obj, 'key') tworzy ref powiązany z jedną właściwością. toRefs(obj) konwertuje wszystkie właściwości reaktywnego obiektu na pojedyncze, powiązane refy — można je bezpiecznie rozpakować.

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() dla elementów DOM

Proszę użyć ref(null) wraz z pasującym atrybutem ref w szablonie, aby uzyskać reaktywne odwołanie do elementu DOM lub instancji komponentu potomnego.

<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 i unref

isRef(val) sprawdza, czy wartość jest refem. unref(val) rozwija ref lub zwraca wartość bez zmian, jeśli nie jest ona refem. Jest to przydatne w composable, które przyjmują zarówno refy, jak i zwykłe wartości.

import { isRef, unref } from 'vue';

function double(val: Ref<number> | number) {
  return unref(val) * 2; // works with both ref and plain number
}

shallowRef i shallowReactive

shallowRef() jest reaktywny tylko na najwyższym poziomie, a nie w sposób głęboki. To samo dotyczy obiektów używających shallowReactive(). Proszę używać tych funkcji w celu optymalizacji wydajności, gdy głęboka reaktywność nie jest potrzebna, na przykład w przypadku dużych, niezmiennych struktur danych.

Modyfikowanie reactive() a zastępowanie

W przypadku reactive() proszę bezpośrednio modyfikować właściwości. Nie można zastąpić całego obiektu — reactive() wymaga zachowania tego samego odwołania. Do zastępowania obiektu proszę używać ref(), który pozwala wykonać 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 reassign

Głęboka reaktywność

reactive() jest domyślnie głęboko reaktywny — Vue śledzi zmiany w zagnieżdżonych obiektach i tablicach. Jest to wygodne, ale może być kosztowne w przypadku bardzo dużych obiektów. W sytuacjach wymagających wysokiej wydajności proszę rozważyć shallowReactive.

Szybkie sprawdzenie

Dlaczego rozpakowanie obiektu reactive() powoduje utratę reaktywności?

Podsumowanie: ref() i reactive()

ref() opakowuje wartości proste; w skrypcie dostęp do nich odbywa się przez .value, a w szablonach są automatycznie rozwijane. reactive() sprawia, że obiekty są głęboko reaktywne; właściwości należy modyfikować bezpośrednio. Rozpakowanie powoduje utratę reaktywności — proszę używać toRefs(). ref(null) służy do tworzenia odwołań do elementów szablonu. shallowRef/shallowReactive służą do optymalizacji wydajności. isRef/unref to narzędzia pomocnicze dla composable.

Często zadawane pytania

Czy lekcja „ref() i reactive()” jest bezpłatna?

Tak — pełny tekst „ref() i reactive()” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „ref() i reactive()”?

Proszę tworzyć reaktywne wartości proste za pomocą ref(), opakowywać obiekty przez reactive() oraz zrozumieć, kiedy używać każdej z tych funkcji i jak uzyskiwać dostęp do wartości ref przez .value. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „ref() i reactive()”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. ref() i reactive()
  2. computed() i watch()
  3. Funkcja setup() i script setup
  4. Composables: wielokrotnego użytku funkcje Composition
← Powrót do Frontend Academy