Hooks de ciclo de vida e busca de dados
Busque dados no momento adequado do ciclo de vida do componente.
Hooks de ciclo de vida e busca de dados é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 3 aulas no total.
Quando buscar dados
Os componentes têm um ciclo de vida: são criados, montados no DOM, atualizados e, por fim, desmontados. Saber qual gancho do ciclo de vida usar para buscar dados mantém o aplicativo responsivo e correto.
O gancho de criação
O gancho created é executado depois que os dados reativos são configurados, mas antes de o componente ser inserido no DOM. É um bom lugar para começar a buscar dados, pois a reatividade já está funcionando.
export default {
data() {
return { posts: [] }
},
created() {
this.fetchPosts()
}
}O gancho de montagem
O gancho mounted é executado depois que o componente é inserido no DOM. Use-o quando a lógica de busca precisar acessar elementos do DOM ou bibliotecas de terceiros que exigem um elemento renderizado.
export default {
mounted() {
this.fetchPosts()
// template refs are now available here
}
}created versus mounted
Para uma busca de dados pura, ambos funcionam. created é executado um pouco antes, então a requisição começa mais cedo. Escolha mounted somente quando realmente precisar do DOM renderizado. Para a maioria das chamadas de API, qualquer um dos dois funciona.
onMounted na API de composição
Na API de composição, os ganchos do ciclo de vida são funções importadas e chamadas dentro de setup. O equivalente a 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 }
}
}O padrão do estado de carregamento
As requisições de rede levam tempo. Acompanhe um sinalizador loading para exibir um indicador enquanto os dados chegam e ocultá-lo quando a operação for concluída.
data() {
return {
posts: [],
loading: false
}
}Alternando o carregamento
Defina loading como true antes da requisição e novamente como false depois dela, independentemente do resultado.
async fetchPosts() {
this.loading = true
try {
const res = await api.get("/posts")
this.posts = res.data
} finally {
this.loading = false
}
}Exibindo um indicador de carregamento
No modelo, use o sinalizador de carregamento para exibir um indicador ou uma mensagem enquanto os dados estão a caminho.
<template>
<p v-if="loading">Loading...</p>
<ul v-else>
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
</template>Lidando com resultados vazios
Planeje sempre para o caso de uma resposta vazia. Exiba uma mensagem amigável quando a lista buscada não tiver itens.
<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>Padrão de carregamento da API de composição
O mesmo padrão de carregamento se adapta facilmente à API de composição com referências reativas.
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)Exibindo dados buscados
Assim que os dados estiverem no estado reativo, o modelo os renderizará automaticamente. Combine os estados de carregamento, dados e lista vazia para oferecer uma experiência de usuário refinada.
<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ção rápida
Avalie seus conhecimentos sobre ganchos do ciclo de vida e busca de dados.
Recapitulação
Busque dados em created ou mounted — ou em onMounted na API de composição. Acompanhe um sinalizador loading com try/finally para que a interface possa exibir um indicador, renderizar os dados e lidar com resultados vazios. Em seguida, você tornará essas requisições mais robustas ao lidar com erros e usar interceptadores.
Perguntas Frequentes
A aula “Hooks de ciclo de vida e busca de dados” é grátis?
Sim — o texto completo de “Hooks de ciclo de vida e busca de dados” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 3 aulas no total.
O que vou aprender em “Hooks de ciclo de vida e busca de dados”?
Busque dados no momento adequado do ciclo de vida do componente. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 3.
Quanto tempo leva a aula “Hooks de ciclo de vida e busca de dados”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Solicitações HTTP com Axios
- Hooks de ciclo de vida e busca de dados
- Tratamento de Erros e Interceptadores Globais