⏳ O que são os hooks de ciclo de vida?
Os hooks de ciclo de vida são funções que permitem executar código em momentos específicos do ciclo de vida de um componente Vue, como quando ele é montado, atualizado ou destruído.
Na Options API, você talvez se lembre de métodos como:
mounted() {
console.log('Componente montado')
}
Na Composition API, esses mesmos momentos são controlados por funções importadas do Vue dentro do setup().
📦 Principais hooks de ciclo de vida
Você pode importar os hooks diretamente do vue:
import { onMounted, onUpdated, onUnmounted } from 'vue'
🔹 onMounted()
Executa uma função depois que o componente for montado no DOM.
import { onMounted } from 'vue'
export default {
setup() {
onMounted(() => {
console.log('Componente montado!')
})
}
}
🔹 onUpdated()
Executa uma função toda vez que o componente for atualizado (por exemplo, quando um valor reativo muda e o DOM é re-renderizado).
import { onUpdated } from 'vue'
export default {
setup() {
onUpdated(() => {
console.log('Componente atualizado!')
})
}
}
🔹 onUnmounted()
Executa uma função quando o componente for destruído, como ao sair da tela ou ser removido.
import { onUnmounted } from 'vue'
export default {
setup() {
onUnmounted(() => {
console.log('Componente destruído!')
})
}
}
🛠️ Outros hooks úteis
| Hook | Quando é executado |
|---|---|
onBeforeMount | Antes do componente ser montado |
onBeforeUpdate | Antes de uma atualização |
onBeforeUnmount | Antes do componente ser destruído |
Todos esses hooks devem ser chamados dentro do
setup().
🧪 Exemplo prático com todos os hooks
import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted
} from 'vue'
export default {
setup() {
onBeforeMount(() => {
console.log('Antes de montar')
})
onMounted(() => {
console.log('Montado')
})
onBeforeUpdate(() => {
console.log('Antes de atualizar')
})
onUpdated(() => {
console.log('Atualizado')
})
onBeforeUnmount(() => {
console.log('Antes de desmontar')
})
onUnmounted(() => {
console.log('Desmontado')
})
}
}
✅ Conclusão
- Hooks de ciclo de vida te permitem executar ações em momentos específicos do ciclo de vida do componente.
- São muito úteis para tarefas como buscar dados, limpar timers ou recursos, e depurar atualizações.
- Eles são usados dentro do
setup()na Composition API, com nomes comoonMounted,onUnmounted, etc.
E o created? Tudo o que você coloca dentro de setup() é executado no mesmo momento que o created() da Options API seria chamado.
export default {
setup() {
console.log('Componente criado (setup iniciado)')
// Lógica que seria do created()
return {}
}
}
logo não existe mais o equivalente ao beforeCreate()
💡 Dica extra
Você pode combinar esses hooks com valores reativos ou watchers para ter comportamentos dinâmicos mais avançados no seu componente!