Vue Academy · Lekcja

Podstawy reaktywności

Poznają Państwo sposób, w jaki Vue śledzi zależności reaktywne.

Podstawy reaktywności to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 3. 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 3 lekcji w sumie.

Czym jest reaktywność?

Reaktywność polega na automatycznym aktualizowaniu DOM-u przez Vue po zmianie danych.

Zmieniają Państwo wartość w JavaScript
Vue wykrywa zmianę
Widok jest renderowany ponownie, aby odzwierciedlać nowy stan

Nie jest wymagana ręczna manipulacja DOM-em.

Jak Vue śledzi zależności

Vue korzysta z systemu śledzenia zależności.

Gdy renderowanie odczytuje wartość reaktywną, Vue rejestruje tę zależność
Gdy wartość później się zmieni, Vue wie, które renderowania uruchomić ponownie
Dzięki temu aktualizacje są precyzyjne i wydajne

ref dla wartości prostych

W Composition API ref sprawia, że pojedyncza wartość staje się reaktywna.

import { ref } from "vue"

const count = ref(0)
const name = ref("Ada")

count.value++          // update via .value
console.log(name.value) // read via .value

ref w szablonach

W szablonach wartości ref są automatycznie rozpakowywane, dlatego nie trzeba używać .value.

<script setup>
import { ref } from "vue"
const count = ref(0)
</script>

<template>
  <p>{{ count }}</p>
  <button @click="count++">Add</button>
</template>

reactive dla obiektów

reactive sprawia, że cały obiekt staje się reaktywny. Do właściwości uzyskuje się dostęp bezpośrednio, bez .value.

import { reactive } from "vue"

const state = reactive({
  count: 0,
  user: { name: "Ada" }
})

state.count++
state.user.name = "Grace"

ref a reactive

Wybór między nimi:

ref działa z dowolną wartością (prostymi i obiektami), a dostęp do niej uzyskuje się przez .value
reactive działa tylko z obiektami, do których uzyskuje się dostęp bezpośrednio

Wiele zespołów preferuje używanie ref wszędzie ze względu na spójność.

Opcja data (Vue 2 / Options API)

Options API korzysta z funkcji data. Każda zwrócona właściwość jest reaktywna.

export default {
  data() {
    return {
      count: 0,
      items: []
    }
  },
  methods: {
    add() { this.count++ }
  }
}

Pułapki reaktywności tablic

Bezpośrednie przypisywanie wartości do indeksu tablicy może być problematyczne, szczególnie w Vue 2.

W Vue 2 przypisanie arr[5] = x nie wywoływało aktualizacji
Proxy w Vue 3 obsługują większość przypadków, ale nadal warto zachować ostrożność

Dla przejrzystości i bezpieczeństwa należy preferować metody tablicowe.

Reaktywne metody tablic

Metody modyfikujące, takie jak push, splice i pop, są śledzone reaktywnie.

const items = reactive([1, 2, 3])

items.push(4)        // reactive
items.splice(0, 1)   // reactive

// Replacing an index in Vue 3 proxy:
items[0] = 99        // works in Vue 3

Zastępowanie a modyfikowanie

Tablice można aktualizować na dwa sposoby:

Modyfikować za pomocą push, splice i sort
Zastępować, przypisując nową tablicę, na przykład utworzoną za pomocą filter lub map

Oba sposoby wywołują reaktywność w Vue 3. Zastępowanie jest często przejrzystsze w przypadku list pochodnych.

// Mutate
state.list.push(item)

// Replace with a filtered copy
state.list = state.list.filter(x => x.active)

Zapobieganie utracie reaktywności

Destrukturyzacja reaktywnego obiektu powoduje utratę reaktywności wyodrębnionych zmiennych.

Wyodrębnienie właściwości kopiuje jej bieżącą wartość
Aby zachować reaktywność podczas destrukturyzacji, należy użyć toRefs

import { reactive, toRefs } from "vue"

const state = reactive({ count: 0 })

// Keeps reactivity
const { count } = toRefs(state)

Szybki test

Proszę sprawdzić swoją znajomość reaktywności Vue.

Podsumowanie: podstawy reaktywności

W tym rozdziale poznali Państwo działanie reaktywności Vue:

Vue śledzi dane używane podczas każdego renderowania
ref sprawia, że wartości są reaktywne (w JS należy używać .value)
reactive sprawia, że obiekty są reaktywne (dostęp bezpośredni)
Options API korzysta z funkcji data
Należy używać metod tablicowych i toRefs, aby uniknąć utraty reaktywności

Następnie: właściwości obliczane.

Często zadawane pytania

Czy lekcja „Podstawy reaktywności” jest bezpłatna?

Tak — pełny tekst „Podstawy reaktywności” 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 3 lekcji w sumie.

Co nauczysz się w „Podstawy reaktywności”?

Poznają Państwo sposób, w jaki Vue śledzi zależności reaktywne. Ć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 1 z 3.

Ile czasu zajmuje lekcja „Podstawy reaktywności”?

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

← Powrót do Vue Academy