Vue Academy · Lekcja

Funkcja setup() i zmienne reaktywne

Punkt wejścia setup(), ref() dla wartości prostych, reactive() dla obiektów, zwracanie wartości.

Funkcja setup() i zmienne reaktywne to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 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.

Punkt wejścia setup()

Composition API działa wewnątrz specjalnej opcji komponentu o nazwie setup(). Funkcja ta jest wykonywana raz, przed utworzeniem komponentu, i służy do deklarowania stanu reaktywnego oraz funkcji.

Wszystko, co zostanie zwrócone z setup(), staje się dostępne w szablonie.

Tworzenie stanu reaktywnego za pomocą ref

ref() opakowuje pojedynczą wartość (liczbę, ciąg znaków, wartość logiczną, a nawet obiekt) w reaktywny kontener. Rzeczywista wartość znajduje się we właściwości .value.

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    console.log(count.value) // 0
    return { count }
  }
}

Tworzenie reaktywnych obiektów za pomocą reactive

reactive() przyjmuje zwykły obiekt i zwraca głęboko reaktywne proxy. Do jego właściwości uzyskuje się dostęp bezpośrednio — nie ma tu .value.

import { reactive } from 'vue'

export default {
  setup() {
    const user = reactive({ name: 'Alice', age: 30 })
    console.log(user.name) // Alice
    return { user }
  }
}

Zwracanie stanu do szablonu

Wszystko, co zostanie zwrócone z setup() jako obiekt, staje się powiązaniem w szablonie. W tym przypadku udostępnione są zarówno count, jak i user.

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    return { count, user }
  }
}

Automatyczne rozpakowywanie w szablonie

W JavaScript zapisano count.value. W szablonie wystarczy napisać count. Vue automatycznie rozpakowuje refy znajdujące się na najwyższym poziomie, więc w szablonie nigdy nie trzeba wpisywać .value.

<!-- template -->
<p>Count: {{ count }}</p>
<p>Name: {{ user.name }}</p>

Dodawanie funkcji

Funkcje zdefiniowane w setup() mogą odczytywać i zmieniać stan reaktywny. Należy pamiętać, że wewnątrz JavaScriptu w przypadku refów nadal używa się .value.

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    function increment() { count.value++ }
    return { count, increment }
  }
}

Podłączanie do szablonu

Należy zwrócić funkcję i powiązać ją ze zdarzeniem. Kliknięcie przycisku wywołuje increment, który modyfikuje ref, a Vue ponownie renderuje widok.

<!-- template -->
<button @click="increment">Count is {{ count }}</button>

Bez słowa kluczowego this

Wewnątrz setup() nie ma this. Pracuje się bezpośrednio ze zadeklarowanymi zmiennymi. Dzięki temu kod łatwiej analizować, a jego typowanie w TypeScript jest prostsze.

Użycie this w setup() nie zapewni dostępu do instancji komponentu.

setup wykonuje się przed utworzeniem komponentu

setup() wykonuje się bardzo wcześnie — przed created i zanim instancja komponentu zostanie w pełni skonfigurowana. Dlatego this jest niedostępne i nie można jeszcze uzyskać dostępu do DOM-u.

Argumenty setup(): props i context

setup(props, context) otrzymuje rozwiązane właściwości jako pierwszy argument oraz obiekt kontekstu jako drugi. Kontekst udostępnia attrs, slots, emit i expose.

export default {
  props: { title: String },
  setup(props, context) {
    console.log(props.title)
    context.emit('ready')
  }
}

Kompletny mały komponent

Oto wszystkie elementy razem: ref, obiekt reaktywny, funkcja oraz zwracane powiązania.

import { ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    function increment() { count.value++ }
    return { count, user, increment }
  }
}

Szybki test

Upewnij się, że rozumiesz działanie setup() i zmiennych reaktywnych.

Podsumowanie

Poznałeś podstawy Composition API:

setup() wykonuje się raz przed utworzeniem komponentu i zwraca powiązania szablonu.
ref() opakowuje wartość — w JS należy używać .value.
reactive() opakowuje obiekt — do właściwości uzyskuje się dostęp bezpośrednio.
Szablony automatycznie rozpakowują refy, więc nie trzeba w nich używać .value.
Wewnątrz setup() nie ma this.

Często zadawane pytania

Czy lekcja „Funkcja setup() i zmienne reaktywne” jest bezpłatna?

Tak — pełny tekst „Funkcja setup() i zmienne reaktywne” 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 „Funkcja setup() i zmienne reaktywne”?

Punkt wejścia setup(), ref() dla wartości prostych, reactive() dla obiektów, zwracanie wartości. Ć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 2 z 4.

Ile czasu zajmuje lekcja „Funkcja setup() i zmienne reaktywne”?

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