16 - Lifecycle Hooks

Olá pessoal, na décima sexta aula do treinamento de Vue.js, iremos aprender a trabalhar com lifecycle.

Lifecycle ou ciclos de vida, são ações que ocorrem antes, durante ou depois da criação de um componente. São úteis para realizarmos diversas funcionalidades quando um determinado componente é chamado, abaixo deixarei uma imagem exemplificando o funcionamento do lifecycle, essa imagem e outros materiais você encontra na documentação oficial.

Especificando a ação de cada lifecycle

Antes da criação do componente:

• beforeCreate: Fase inicial onde as propriedades do componente estão sendo inicializadas, mas os eventos ainda não foram configurados.
• created: Nesta fase, o componente foi criado, e as propriedades e métodos do componente estão acessíveis. No entanto, o modelo ainda não foi montado, e não há manipulação de DOM nesta fase.

Durante da criação do componente:

• beforeMount: Antes de o componente ser montado no DOM, ganha acesso ao modelo (template), mas o modelo ainda não foi renderizado.
• mounted: O componente foi montado no DOM. Neste ponto, você pode acessar o DOM diretamente e realizar operações de manipulação de DOM, se necessário. É frequentemente usado para fazer chamadas de API e inicializar bibliotecas de terceiros.

Após a criação do componente:

• beforeUpdate: Antes de o componente ser atualizado, esta fase é acionada. As alterações no estado do componente já foram reativas, mas ainda não foram refletidas no DOM.
• updated: Após a atualização do componente, esta fase é acionada. Neste ponto, as mudanças no estado do componente já foram refletidas no DOM.
• beforeDestroy: Antes de um componente ser destruído, esta fase é acionada. Aqui, você pode limpar event listeners, cancelar assinaturas e liberar recursos.
• destroyed: Após o componente ser destruído, esta fase é acionada. Neste ponto, o componente foi removido do DOM, e todas as instâncias e referências do componente foram desvinculadas. É usado para limpar recursos restantes.

Caso queira exemplos de cada um dos lifecycles acima, acesse a documentação oficial.

Para termos um projeto prático, utilizarei o lifecycle mounted para alterar o valor de uma variável.

Crie um componente chamado Exemplo10Lifecycle.vue, contendo a seguinte estrutura:

Em seguida, no arquivo App.vue, iremos importar nosso componente e realizar a referência na estrutura HTML:

Abaixo deixo um vídeo mostrando cada etapa desta aula: