2. Ciclo de Vida da Instância Vue (Introdução ao Vue.js)

Nesse tópico vamos entender como que funciona o ciclo de vida da instância Vue.

Se você caiu de paraquedas aqui, saiba que esse post faz parte de uma série de tópicos sobre como aprender os conceitos básicos do Vue.js criando um Gerador de Memes.

Se você ficou com dúvidas sobre como resolver o desafio da 1. A Instância Vue. Segue o código do desafio resolvido no Github para você entender e continuar com a leitura deste post :)

Ciclo de Vida da Instância Vue

Nesse tópico vamos entender como que funciona o ciclo de vida da instância Vue.

Objetivo

Vamos adicionar o valor do título da página (Meme Generator) somente após a instância for criada.

Ciclo de Vida da Instância

diagrama do ciclo de vida

• Cada instância Vue passa por uma série de etapas em sua inicialização, tais como: a) configurar a observação de dados, b) compilar o template, c) montar a instância no DOM, d) atualizar o DOM quando os dados forem alterados.
• Ao longo do caminho, ocorre a invocação de alguns gatilhos de ciclo de vida, oferecendo a oportunidade de executar lógicas personalizadas em etapas específicas.

Gatilhos do ciclo de vida da instância

• beforeCreate: Após iniciar os eventos e o ciclo de vida
• created: Após o início da reatividade no Vue
• beforeMount: Após ter compilado o template
• mounted : Depois do elemento vm.$elestar montado
• beforeUpdate : Antes de alguma alteração de data
• updated : Depois da alteração de alguma data
• beforeDestroy : Quando o vm.$destroy() é chamado
• destroyed : Quando o componente remove watchers, componentes filhos, e event listeners e é destruído.

Bom não se assuste em um primeiro momento, você dificilmente vai precisar utilizar tantos hooks (gatilhos) no Vue.js, mas quando precisar você pode voltar nesse post para lembrar em que momento ele é chamado.

No nosso exemplo vamos utilizar o gatilho created para entender como usar, alterando o valor de uma variável.

Um exemplo prático de uso dos gatilhos seria por exemplo quando você precisar definir os dados de um array, antes do componente estar montado para você já exibir em tela.

Assim, você poderia chamar o gatilho mounted e dentro dele colocar a lógica para fazer uma requisição ajax usando o axios para obter os dados e colocar em um array.

Ciclo de Vida da Instância

Por exemplo o gatilho created pode ser utilizado para executar código logo após a instância ser criada:

Adicione abaixo da prop dataem seu main.js o gatilho created()e teste no navegador se a mensagem created aparece no console.log.

that’s it

Este foi um post bem curto e resumidão então vamos para o que aprendemos.

2. Ciclo de vida da instância Vue — (O que aprendemos)

• A instância Vue possui gatilhos que permitem adicionar códigos específicos durante a criação de sua instância.

2º DESAFIO

• Na propriedade data, atribuir o valor de title para ''.
• Adicionar o valor de title (Meme Generator), no gatilho createdda instância.

Moleza esse desafio, vamos para o próximo post…

Próximo post

3. Dados computados (Introdução ao Vue.js)

Referências

The Vue Instance - Vue.js