Vue Academy · Lekcja

Przegląd faz cyklu życia

Tworzenie, montowanie, aktualizowanie, odmontowywanie — co dzieje się w każdej fazie.

Przegląd faz cyklu życia to bezpłatna lekcja Vue 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 Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Cykl życia komponentu

Każdy komponent Vue przechodzi przewidywalny cykl: jest tworzony, montowany na stronie, aktualizowany w miarę zmian danych, a na końcu usuwany. Są to fazy cyklu życia, a Vue pozwala podłączyć się do każdej z nich.

Cztery fazy

Tworzenie — wykonywana jest funkcja setup i inicjalizowana reaktywność.
Montowanie — DOM jest tworzony i wstawiany na stronę.
Aktualizowanie — zmiany reaktywne wywołują ponowne renderowanie.
Odmontowywanie — komponent jest usuwany, a zasoby są zwalniane.

Faza 1: tworzenie

Najpierw tworzona jest instancja komponentu i konfigurowana reaktywność. W Composition API w tym momencie wykonywany jest <script setup> (lub setup()). DOM jeszcze nie istnieje, więc nie można odczytywać elementów.

Co można robić podczas tworzenia

Tworzenie to dobry moment na zadeklarowanie stanu reaktywnego i rozpoczęcie prac niezależnych od DOM, takich jak rozpoczęcie pobierania danych. Należy pamiętać, że szablon nie został jeszcze wyrenderowany, więc referencje do elementów DOM są nadal puste.

<script setup>
import { ref } from 'vue'
const user = ref(null)
// fetch can start here
</script>

Faza 2: montowanie

Następnie Vue tworzy rzeczywiste węzły DOM na podstawie szablonu i wstawia je na stronę. Po zamontowaniu referencje szablonu wskazują rzeczywiste elementy, które można mierzyć lub modyfikować.

Hook montowania

onMounted jest uruchamiany raz, zaraz po wstawieniu komponentu. To właściwe miejsce na konfigurację zależną od DOM, taką jak inicjalizacja wykresu lub ustawienie fokusu w polu wejściowym.

<script setup>
import { onMounted } from 'vue'
onMounted(() => {
  console.log('in the DOM now')
})
</script>

Faza 3: aktualizowanie

Gdy zmieniają się dane reaktywne, od których zależy komponent, Vue ponownie renderuje komponent i wydajnie aktualizuje DOM — zmieniane są tylko te jego części, które rzeczywiście uległy zmianie. Ten cykl aktualizacji może wystąpić wiele razy w trakcie życia komponentu.

Hooki aktualizacji

onBeforeUpdate jest uruchamiany tuż przed zastosowaniem zmian w DOM, a onUpdated — tuż po nim. Hooki te są wywoływane przy każdej zmianie reaktywnej wpływającej na renderowanie.

<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
  console.log('DOM patched')
})
</script>

Faza 4: odmontowywanie

Gdy komponent zostaje usunięty — przez v-if, zmianę trasy lub usunięcie z listy — Vue go rozmontowuje. To moment na zwolnienie timerów, nasłuchiwaczy i subskrypcji, aby uniknąć wycieków pamięci.

Hook odmontowania

onUnmounted jest uruchamiany po usunięciu komponentu. W tym miejscu należy anulować interwały, usunąć globalne nasłuchiwacze i przerwać żądania będące w toku.

<script setup>
import { onMounted, onUnmounted } from 'vue'
let id
onMounted(() => { id = setInterval(tick, 1000) })
onUnmounted(() => clearInterval(id))
</script>

Pełna kolejność

W cyklu życia komponentu hooki są wywoływane w następującej kolejności: setup, onBeforeMount, onMounted, następnie wielokrotnie pary onBeforeUpdate/onUpdated, a na końcu onBeforeUnmount/onUnmounted.

Szybki test

Proszę sprawdzić, czy rozumieją Państwo cykl życia.

Podsumowanie

Teraz znają już Państwo cały obraz:

Tworzenie: wykonywana jest konfiguracja, reaktywność jest gotowa, DOM jeszcze nie istnieje.
Montowanie: DOM zostaje utworzony i wstawiony; referencje stają się dostępne.
Aktualizowanie: zmiana reaktywna wywołuje wydajną aktualizację.
Odmontowywanie: komponent zostaje usunięty; tutaj należy wykonać sprzątanie.

Często zadawane pytania

Czy lekcja „Przegląd faz cyklu życia” jest bezpłatna?

Tak — pełny tekst „Przegląd faz cyklu życia” 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 „Przegląd faz cyklu życia”?

Tworzenie, montowanie, aktualizowanie, odmontowywanie — co dzieje się w każdej fazie. Ć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 4.

Ile czasu zajmuje lekcja „Przegląd faz cyklu życia”?

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