Vue - Hooks de Ciclo de Vida no setup()

⏳ 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

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 como onMounted, 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!