Alô, gente! Seguimos firmes e fortes por aqui. Hoje é dia de falarmos um pouco sobre os lifecycle hooks e as mudanças que eles tiveram na versão 3 do Vue.

Lifecycle hooks

• Primeiramente, o que são os Lifecycle Hooks? As vezes um nome assim assusta quem está começando no mundo do Vue, mas na verdade o conceito é bem simples: os hooks são simplesmente funções que são executadas pelo Vue em vários momentos diferentes do ciclo de vida do nosso componente. Ok, até aí parece simples, mas como assim? Bom, o Vue antes de criar a instância do nosso componente precisa fazer várias coisas por debaixo dos panos, como preparar os nossos dados para serem observados, compilar no nosso template, dar bind nos elementos e etc. Mesmo depois da nossa instância ser criada, ele ainda roda algumas funções para fazer as atualizações necessárias na DOM e ainda temos alguns métodos que são rodados antes de destruirmos a instância do nosso componente. Os hooks nos permitem rodar códigos específicos quando esses momentos acontecem no nosso componente.

• Essa imagem é disponibilizada pela própria documentação do Vue e nos mostra em qual momento que cada lifecycle roda na nossa aplicação. Não há necessidade de decorar todos, a maioria deles dificilmente será utilizada, só em casos muito específicos. O mais importante para conhecermos no momento é o Created, é nesse hook que geralmente fazemos as requisições para as APIs externas.
• Pouca coisa mudou em relação aos hooks no Vue 3, a grande diferença é que para usar os hooks dentro da nossa função Setup precisamos adicionar o prefixo "on", com exceção dos de beforeCreated e de created, segue abaixo uma tabela da documentação do Vue 3 para referência Lifecycle Hooks:

Finalizando

Os hooks podem ser úteis quando queremos realizar certas operações na nossa aplicação em etapas específicas do nosso código, além do created, podemos citar o hook de updated, que roda depois de a DOM ter sido atualizada e re-renderizada, e o beforeUnmont que roda antes de o componente ser destruído.