Vue Academy · Lekcja

ref a reactive: kiedy używać każdego z nich

Dostęp przez ref.value, automatyczne rozpakowywanie reactive w szablonach, toRefs(), toRef() do destrukturyzacji.

Lekcja 3 z 413 kroki

ref a reactive: kiedy używać każdego z nich to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 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 Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Dwa narzędzia reaktywności

Vue oferuje dwa główne sposoby tworzenia stanu reaktywnego: ref() i reactive(). Częściowo się pokrywają, ale każde z nich lepiej pasuje do określonych sytuacji. Wiedza o tym, którego użyć, pomaga utrzymać kod w czystości.

ref działa z dowolną wartością

ref() może opakować cokolwiek: liczbę, ciąg znaków, wartość logiczną, tablicę lub obiekt. W JavaScript wartość znajduje się we właściwości .value.

import { ref } from 'vue'

const count = ref(0)
const name = ref('Alice')
const isOpen = ref(false)

count.value++
name.value = 'Bob'

ref jest automatycznie rozpakowywany w szablonach

W JavaScript należy zapisywać .value, ale szablon automatycznie rozpakowuje ref znajdujący się na najwyższym poziomie. Dlatego {{ count }} po prostu działa.

<!-- template -->
<p>{{ count }} - {{ name }}</p>

reactive służy do obiektów

reactive() przyjmuje wyłącznie obiekty (w tym tablice i obiekty typu Map). Zwraca głęboko reaktywne proxy, a do właściwości uzyskuje się dostęp bezpośrednio — bez .value.

import { reactive } from 'vue'

const state = reactive({
  name: 'Alice',
  age: 30,
  hobbies: ['reading']
})

state.age = 31
state.hobbies.push('coding')

reactive jest głęboko reaktywne

Zagnieżdżone obiekty i tablice znajdujące się wewnątrz obiektu reactive również są reaktywne. Modyfikacja zagnieżdżonej właściwości wywołuje aktualizacje bez dodatkowej pracy.

const state = reactive({ profile: { city: 'Paris' } })
state.profile.city = 'Berlin' // reactive!

Ograniczenie reactive: destrukturyzacja je przerywa

Podczas destrukturyzacji obiektu reactive wyodrębnione zmienne stają się zwykłymi wartościami i tracą reaktywność. To najczęstsza pułapka.

const state = reactive({ name: 'Alice' })
let { name } = state
name = 'Bob'
// state.name is still 'Alice' - reactivity lost!

Rozwiązanie: toRefs do bezpiecznej destrukturyzacji

toRefs() konwertuje każdą właściwość obiektu reaktywnego na ref. Można teraz przeprowadzić destrukturyzację bez utraty reaktywności, ponieważ każdy element jest refem połączonym ze źródłem.

import { reactive, toRefs } from 'vue'

const state = reactive({ name: 'Alice', age: 30 })
const { name, age } = toRefs(state)
name.value = 'Bob' // state.name is now 'Bob'

toRef dla pojedynczej właściwości

Jeśli potrzebujesz tylko jednej właściwości jako ref, użyj toRef(state, 'key'). Pozostaje ona zsynchronizowana z obiektem źródłowym w obu kierunkach.

import { reactive, toRef } from 'vue'

const state = reactive({ age: 30 })
const age = toRef(state, 'age')
age.value = 31 // state.age is now 31

Praktyczna zasada

Używaj ref() dla typów prostych (liczb, ciągów znaków i wartości logicznych) oraz samodzielnych wartości.
Używaj reactive() dla grupy powiązanych właściwości tworzących jeden obiekt.
Zwracając obiekt reaktywny z composable, opakuj go w toRefs().

ref może również przechowywać obiekty

Nie musisz wybierać reactive dla obiektów. ref przechowujący obiekt również jest głęboko reaktywny — dostęp do niego uzyskuje się po prostu przez .value. Wiele zespołów używa ref wszędzie, aby zachować spójność.

const user = ref({ name: 'Alice' })
user.value.name = 'Bob' // reactive
user.value = { name: 'Carol' } // replace whole object

Tabela podsumowująca

ref: dowolna wartość, w JS wymaga .value, w szablonie jest automatycznie rozpakowywany i można go całkowicie zastąpić nową wartością.
reactive: tylko obiekty, bez .value, głęboka reaktywność, ale destrukturyzacja przerywa reaktywność i obiektu nie można zastąpić nowym.
toRefs: most umożliwiający destrukturyzację właściwości reaktywnych.

Szybki test

Wybierz właściwe narzędzie.

Odpowiedz w interaktywnej lekcji

Podsumowanie

Najważniejsze informacje:

ref() opakowuje dowolną wartość i w JavaScript wymaga użycia .value.
reactive() służy do obiektów i zapewnia głęboką reaktywność, ale destrukturyzacja ją przerywa.
toRefs() umożliwia bezpieczną destrukturyzację obiektu reaktywnego.
Używaj ref dla typów prostych, a reactive dla zgrupowanego stanu obiektu.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 42
Lekcje: 156

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „ref a reactive: kiedy używać każdego z nich” jest bezpłatna?

Tak — pełny tekst „ref a reactive: kiedy używać każdego z nich” 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 Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „ref a reactive: kiedy używać każdego z nich”?

Dostęp przez ref.value, automatyczne rozpakowywanie reactive w szablonach, toRefs(), toRef() do destrukturyzacji. Ćwiczysz Vue 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ąć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue 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 3 z 4.

Ile czasu zajmuje lekcja „ref a reactive: kiedy używać każdego z nich”?

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 Vue Academy?

Tak. Każda lekcja Vue 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

Dlaczego Composition API?
Funkcja setup() i zmienne reaktywne
ref a reactive: kiedy używać każdego z nich
Computed i watch w Composition API

← Powrót do Vue Academy