Hooki cyklu życia i pobieranie danych
Pobiorą Państwo dane we właściwym momencie cyklu życia komponentu.
Hooki cyklu życia i pobieranie danych to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 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.
Kiedy pobierać dane
Komponenty mają swój cykl życia: są tworzone, montowane w DOM, aktualizowane, a ostatecznie odmontowywane. Wiedza o tym, którego hooka cyklu życia użyć do pobierania danych, pomaga zachować responsywność i poprawność aplikacji.
Hook created
Hook created jest wykonywany po skonfigurowaniu danych reaktywnych, ale przed wstawieniem komponentu do DOM. To dobre miejsce na rozpoczęcie pobierania danych, ponieważ reaktywność już działa.
export default {
data() {
return { posts: [] }
},
created() {
this.fetchPosts()
}
}Hook mounted
Hook mounted jest wykonywany po wstawieniu komponentu do DOM. Użyj go, gdy logika pobierania danych wymaga dostępu do elementów DOM lub bibliotek zewnętrznych, które wymagają wyrenderowanego elementu.
export default {
mounted() {
this.fetchPosts()
// template refs are now available here
}
}created kontra mounted
W przypadku samego pobierania danych oba rozwiązania działają. created jest wykonywany nieco wcześniej, więc żądanie rozpoczyna się szybciej. Wybierz mounted tylko wtedy, gdy rzeczywiście potrzebujesz wyrenderowanego DOM. W przypadku większości wywołań API oba rozwiązania są odpowiednie.
onMounted w Composition API
W Composition API hooki cyklu życia są importowanymi funkcjami wywoływanymi wewnątrz setup. Odpowiednikiem mounted jest onMounted.
import { ref, onMounted } from "vue"
import { api } from "./api"
export default {
setup() {
const posts = ref([])
onMounted(async () => {
const res = await api.get("/posts")
posts.value = res.data
})
return { posts }
}
}Wzorzec stanu ładowania
Żądania sieciowe wymagają czasu. Śledź flagę loading, aby podczas pobierania danych wyświetlać spinner, a po zakończeniu go ukryć.
data() {
return {
posts: [],
loading: false
}
}Przełączanie stanu ładowania
Ustaw loading na true przed żądaniem, a po jego zakończeniu z powrotem na false, niezależnie od wyniku.
async fetchPosts() {
this.loading = true
try {
const res = await api.get("/posts")
this.posts = res.data
} finally {
this.loading = false
}
}Wyświetlanie wskaźnika ładowania
W szablonie sprawdzaj flagę ładowania, aby podczas pobierania danych wyświetlać spinner lub komunikat.
<template>
<p v-if="loading">Loading...</p>
<ul v-else>
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
</template>Obsługa pustych wyników
Zawsze uwzględniaj możliwość otrzymania pustej odpowiedzi. Wyświetl przyjazny komunikat, gdy pobrana lista nie zawiera żadnych elementów.
<ul v-if="posts.length">
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
<p v-else>No posts found.</p>Wzorzec ładowania w Composition API
Ten sam wzorzec obsługi ładowania można łatwo zastosować w Composition API za pomocą refów.
const posts = ref([])
const loading = ref(false)
async function load() {
loading.value = true
try {
posts.value = (await api.get("/posts")).data
} finally {
loading.value = false
}
}
onMounted(load)Wyświetlanie pobranych danych
Gdy dane znajdą się w stanie reaktywnym, szablon automatycznie je wyrenderuje. Połącz stany ładowania, danych i pustego wyniku, aby zapewnić dopracowane doświadczenie użytkownika.
<template>
<section>
<p v-if="loading">Loading...</p>
<ul v-else-if="posts.length">
<li v-for="p in posts" :key="p.id">{{ p.title }}</li>
</ul>
<p v-else>Nothing here yet.</p>
</section>
</template>Szybkie sprawdzenie
Sprawdź swoją wiedzę na temat hooków cyklu życia i pobierania danych.
Podsumowanie
Pobieraj dane w created lub mounted (albo w onMounted w Composition API). Śledź flagę loading za pomocą try/finally, aby interfejs mógł wyświetlać spinner, renderować dane i obsługiwać puste wyniki. Następnie zwiększysz niezawodność tych żądań, obsługując błędy i używając interceptorów.
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
Często zadawane pytania
Czy lekcja „Hooki cyklu życia i pobieranie danych” jest bezpłatna?
Tak — pełny tekst „Hooki cyklu życia i pobieranie danych” 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 „Hooki cyklu życia i pobieranie danych”?
Pobiorą Państwo dane we właściwym momencie cyklu życia komponentu. Ć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 3.
Ile czasu zajmuje lekcja „Hooki cyklu życia i pobieranie danych”?
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
- Żądania HTTP z Axios
- Hooki cyklu życia i pobieranie danych
- Obsługa błędów i globalne interceptory