Entendendo os Lifecycle Hooks no Vue.js

Se você está desenvolvendo aplicações Vue e se pergunta quando buscar dados, limpar recursos ou interagir com o DOM, você precisa entender os lifecycle hooks. Esses hooks são a espinha dorsal do comportamento de componentes no Vue 3, mas muitos desenvolvedores têm dificuldade em saber qual hook usar e quando.

Este artigo explica os lifecycle hooks do Vue 3 usando a Composition API, cobrindo cada fase desde a criação até a destruição do componente com exemplos práticos que você pode aplicar imediatamente.

O Hook Setup: O Ponto de Entrada do Seu Componente

O hook setup é a pedra angular da Composition API do Vue 3, substituindo tanto beforeCreate quanto created do Vue 2. Ele é executado antes da instância do componente ser totalmente inicializada, tornando-o o lugar perfeito para definir estado reativo e compor a lógica do seu componente.

import { ref, reactive } from 'vue'

export default {
  setup(props, context) {
    const count = ref(0)
    const user = reactive({ name: '', email: '' })
    
    // Logic runs immediately, before template compilation
    console.log('Component initializing')
    
    return { count, user }
  }
}

Diferentemente da Options API do Vue 2, a função setup recebe props e context como parâmetros, dando acesso direto às propriedades do componente sem usar this.

Fase de Montagem: onBeforeMount e onMounted

onBeforeMount() - Preparação Pré-DOM

O hook onBeforeMount é disparado após o setup mas antes do DOM do componente ser criado. Use-o para operações que precisam acontecer antes da renderização mas não requerem acesso ao DOM.

import { onBeforeMount } from 'vue'

export default {
  setup() {
    onBeforeMount(() => {
      // Initialize non-DOM dependent resources
      console.log('Template compiled, DOM not yet created')
    })
  }
}

onMounted() - Operações com DOM Pronto

onMounted é onde a maioria das inicializações relacionadas ao DOM acontecem. O template do componente foi renderizado e inserido no documento, tornando seguro acessar elementos e inicializar bibliotecas de terceiros.

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const chartContainer = ref(null)
    
    onMounted(async () => {
      // Fetch data after component mounts
      const data = await fetch('/api/data').then(r => r.json())
      
      // Initialize chart library with DOM element
      // Assuming Chart is imported from a charting library
      new Chart(chartContainer.value, { data })
    })
    
    return { chartContainer }
  }
}

Fase de Atualização: Mudanças de Estado Reativo

onBeforeUpdate() - Lógica Pré-renderização

Quando mudanças em dados reativos disparam uma re-renderização, onBeforeUpdate é executado primeiro. É sua última chance de ler o estado atual do DOM antes do Vue atualizá-lo.

import { onBeforeUpdate } from 'vue'

export default {
  setup() {
    onBeforeUpdate(() => {
      // Capture current scroll position before DOM updates
      const scrollY = window.scrollY
      // Store or use scrollY as needed
    })
  }
}

onUpdated() - Operações Pós-renderização

Após o Vue atualizar o DOM, onUpdated é disparado. Tenha cuidado aqui—modificar estado reativo pode causar loops infinitos.

import { onUpdated } from 'vue'

export default {
  setup() {
    onUpdated(() => {
      // DOM has been updated
      // Use nextTick() for specific state change reactions
      console.log('Component re-rendered')
    })
  }
}

Fase de Desmontagem: Limpeza do Componente

onBeforeUnmount() - Tarefas Pré-limpeza

Antes de um componente ser removido, onBeforeUnmount dá acesso ao componente totalmente funcional uma última vez.

import { onBeforeUnmount, reactive } from 'vue'

export default {
  setup() {
    const state = reactive({ data: 'important info' })
    
    onBeforeUnmount(() => {
      // Save component state or notify external systems
      localStorage.setItem('lastState', JSON.stringify(state))
    })
    
    return { state }
  }
}

onUnmounted() - Limpeza de Recursos

onUnmounted é crucial para prevenir vazamentos de memória. Limpe event listeners, timers e assinaturas aqui.

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    let timer
    
    const handleResize = () => {
      console.log('Window resized')
    }
    
    onMounted(() => {
      timer = setInterval(() => {
        console.log('Polling...')
      }, 1000)
      
      window.addEventListener('resize', handleResize)
    })
    
    onUnmounted(() => {
      clearInterval(timer)
      window.removeEventListener('resize', handleResize)
    })
  }
}

Padrões Práticos e Melhores Práticas

Lembre-se destes pontos-chave ao trabalhar com métodos de lifecycle do Vue 3:

1. Sempre importe os hooks de ‘vue’ antes de usá-los
2. Chame hooks de forma síncrona dentro de setup()—não em callbacks ou promises
3. Migração do Vue 2 para Vue 3: beforeDestroy agora é onBeforeUnmount, destroyed é onUnmounted
4. Renderização no servidor: Hooks de montagem e atualização não são executados durante SSR

Para testar componentes com lifecycle hooks, use Vue Test Utils para disparar e verificar adequadamente o comportamento dos hooks.

Conclusão

Os lifecycle hooks da Composition API do Vue 3 fornecem controle preciso sobre o comportamento do seu componente em cada estágio. Ao entender quando cada hook é disparado e quais recursos estão disponíveis, você pode escrever componentes mais limpos e performáticos. Comece com setup() para inicialização, use onMounted() para operações no DOM, e sempre limpe recursos no onUnmounted() para prevenir vazamentos de memória.

Perguntas Frequentes

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.