Hook del ciclo di vita e recupero dei dati
Recuperi i dati nel momento appropriato del ciclo di vita del componente.
Hook del ciclo di vita e recupero dei dati è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 3 lezioni in totale.
Quando recuperare i dati
I componenti hanno un ciclo di vita: vengono creati, montati nel DOM, aggiornati e infine smontati. Sapere quale hook del ciclo di vita usare per recuperare i dati mantiene l'app reattiva e corretta.
L'hook created
L'hook created viene eseguito dopo la configurazione dei dati reattivi, ma prima che il componente venga inserito nel DOM. È un buon punto per iniziare a recuperare i dati, perché la reattività è già attiva.
export default {
data() {
return { posts: [] }
},
created() {
this.fetchPosts()
}
}L'hook mounted
L'hook mounted viene eseguito dopo che il componente è stato inserito nel DOM. Lo utilizzi quando la logica di recupero dei dati deve accedere agli elementi del DOM o a librerie di terze parti che richiedono un elemento renderizzato.
export default {
mounted() {
this.fetchPosts()
// template refs are now available here
}
}created e mounted a confronto
Per il semplice recupero dei dati, entrambi funzionano. created viene eseguito leggermente prima, quindi la richiesta parte prima. Scelga mounted solo quando ha realmente bisogno del DOM renderizzato. Per la maggior parte delle chiamate API, entrambe le opzioni vanno bene.
onMounted nella Composition API
Nella Composition API, gli hook del ciclo di vita sono funzioni importate che vengono chiamate all'interno di setup. L'equivalente di mounted è 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 }
}
}Il pattern dello stato di caricamento
Le richieste di rete richiedono tempo. Tenga traccia di un flag loading per mostrare un indicatore di caricamento mentre arrivano i dati e nasconderlo al termine.
data() {
return {
posts: [],
loading: false
}
}Attivazione e disattivazione del caricamento
Imposti loading su true prima della richiesta e nuovamente su false dopo, indipendentemente dall'esito.
async fetchPosts() {
this.loading = true
try {
const res = await api.get("/posts")
this.posts = res.data
} finally {
this.loading = false
}
}Visualizzazione di un indicatore di caricamento
Nel template, usi il flag di caricamento per mostrare un indicatore o un messaggio mentre i dati stanno arrivando.
<template>
<p v-if="loading">Loading...</p>
<ul v-else>
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
</template>Gestione dei risultati vuoti
Preveda sempre il caso di una risposta vuota. Mostri un messaggio chiaro quando l'elenco recuperato non contiene elementi.
<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>Pattern di caricamento con la Composition API
Lo stesso pattern di caricamento si adatta facilmente alla Composition API usando i ref.
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)Visualizzazione dei dati recuperati
Una volta inseriti i dati nello stato reattivo, il template li visualizza automaticamente. Combini gli stati di caricamento, dati e assenza di risultati per offrire un'esperienza utente curata.
<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>Verifica rapida
Verifichi la Sua conoscenza degli hook del ciclo di vita e del recupero dei dati.
Riepilogo
Recuperi i dati in created o mounted (oppure in onMounted nella Composition API). Tenga traccia di un flag loading con try/finally, così l'interfaccia può mostrare un indicatore di caricamento, visualizzare i dati e gestire i risultati vuoti. Ora renderà queste richieste più solide gestendo gli errori e usando gli interceptor.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 42
- Lezioni
- 156
Domande Frequenti
La lezione «Hook del ciclo di vita e recupero dei dati» è gratuita?
Sì — il testo completo di «Hook del ciclo di vita e recupero dei dati» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 3 lezioni in totale.
Cosa imparerò in «Hook del ciclo di vita e recupero dei dati»?
Recuperi i dati nel momento appropriato del ciclo di vita del componente. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 3.
Quanto tempo richiede la lezione «Hook del ciclo di vita e recupero dei dati»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Vue Academy?
Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Richieste HTTP con Axios
- Hook del ciclo di vita e recupero dei dati
- Gestione degli errori e interceptor globali