O Vue.js é um framework JavaScript muito usado para criar aplicações web. Foi pensado para ser fácil de usar e de perceber, o que faz dele uma escolha frequente tanto para quem começa como para quem já tem anos de código. Um dos seus aspetos mais importantes é o sistema de hooks do ciclo de vida, que te deixa controlar o comportamento dos componentes em resposta a acontecimentos como a montagem, a atualização e a destruição na árvore de componentes.
O que é um hook do ciclo de vida no Vue.js?
Um hook do ciclo de vida do Vue.js é uma função chamada em momentos diferentes, à medida que o componente é criado, atualizado ou removido. Os hooks do ciclo de vida permitem-te definir ações concretas a executar em cada etapa da vida do componente: inicializar variáveis, chamar métodos assíncronos ou limpar recursos.
Os hooks do ciclo de vida mais usados
Existem vários hooks do ciclo de vida no Vue.js, mas os mais comuns são estes:
setup: o setup() corre antes de todos os outros hooks e é o ponto de entrada da Composition API nos componentes, sem etapa de build, ou para integrar código baseado na Composition API num componente escrito com a Options API.created: chamado depois de o componente ser criado e de as suas propriedades serem inicializadasmounted: chamado quando o componente é montado na página e a renderização está concluídaupdated: chamado quando o componente é atualizado com novos dadosdestroyed: chamado quando o componente é destruído e os seus recursos são libertados
Como usar os hooks do ciclo de vida
Usar os hooks do ciclo de vida no Vue.js é simples: basta acrescentar um método ao objeto de opções do componente. Por exemplo, para definir uma ação a executar quando o componente é montado, acrescentas este método ao objeto de opções:
mounted () {
// código a executar quando o componente é montado
}Exemplo de utilização dos hooks do ciclo de vida
Imagina que tens um componente que mostra uma lista de artigos vinda de uma API. Podes usar os hooks do ciclo de vida para fazer o seguinte:
- No hook
created, chamar a API para ir buscar os artigos - No hook
mounted, mostrar os artigos na página comv-for - No hook
updated, verificar se os dados mudaram e voltar a chamar a API se for preciso - No hook
destroyed, libertar recursos como as subscrições de eventos, para evitar fugas de memória.
Aqui fica um exemplo concreto do uso dos hooks do ciclo de vida para mostrar uma lista de artigos:
<template>
<div>
<ul>
<li v-for="article in articles" :key="article.id">{{ article.title }}</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
articles: []
}
},
created () {
this.fetchData()
},
methods: {
fetchData () {
// chamar a API para ir buscar os artigos
}
},
updated () {
if (this.articles.length === 0) {
this.fetchData()
}
},
destroyed () {
// liberta os recursos aqui
}
}
</script>FAQ sobre os hooks do ciclo de vida do Vue JS
Qual é a ordem de execução dos hooks do ciclo de vida no Vue JS?
No Vue 3, a ordem de execução dos hooks do ciclo de vida é esta: beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed.
Posso usar vários hooks do ciclo de vida no mesmo componente?
Sim, podes usar vários hooks do ciclo de vida no mesmo componente. É útil quando queres vigiar e controlar o comportamento de um componente em momentos diferentes da sua vida.
Há hooks do ciclo de vida que não podem ser usados em conjunto?
Não, não há restrições ao uso conjunto de hooks diferentes. Ainda assim, alguns hooks só podem ser usados em determinadas etapas do ciclo de vida, como o beforeDestroy, que só é chamado depois de o componente ter sido criado, mas antes de ser destruído.
Conclusão
Os hooks do ciclo de vida do Vue.js são uma ferramenta poderosa para quem quer controlar o comportamento dos seus componentes em resposta a diferentes acontecimentos. Com eles, executas ações concretas em cada momento da vida do componente: inicializar variáveis, chamar métodos assíncronos ou libertar recursos. Explora os vários hooks do ciclo de vida do Vue.js para ganhar à-vontade no desenvolvimento.
