Compreendendo os ganchos de ciclo de vida do Vue.js
Introdução
Os ganchos de ciclo de vida são uma janela para como a biblioteca que você está usando funciona nos bastidores. Os ganchos de ciclo de vida permitem que você saiba quando seu componente é criado, adicionado ao DOM, atualizado ou destruído.
Este artigo apresentará os ganchos de criação, montagem, atualização e destruição no Vue.js.
Pré-requisitos
Para seguir este tutorial, você precisará de:
- Familiaridade com Vue.js. Leia a série Como desenvolver sites com Vue.js para saber mais.
Compreendendo os ganchos de criação (inicialização)
Hooks de criação são os primeiros hooks executados em seu componente. Eles permitem que você execute ações antes mesmo de seu componente ser adicionado ao DOM. Ao contrário de qualquer um dos outros ganchos, os ganchos de criação também são executados durante a renderização do lado do servidor.
Use ganchos de criação se precisar configurar coisas em seu componente, tanto durante a renderização do cliente quanto da renderização do servidor.
Você não terá acesso ao DOM ou ao elemento de montagem de destino (this.$el) dentro dos ganchos de criação.
antes de criar
O gancho beforeCreate é executado na inicialização do seu componente - data não se tornou reativo e eventos ainda não foram configurados:
<script>
export default {
beforeCreate() {
console.log('At this point, events and lifecycle have been initialized.')
}
}
</script>
Neste exemplo, quando o gancho beforeCreate é executado, este trecho registrará a mensagem:
OutputAt this point, events and lifecycle have been initialized.
criada
O gancho created é executado antes que os modelos e o DOM virtual sejam montados ou renderizados - você pode acessar dados reativos e eventos que estão ativos:
<template>
<div ref="example-element">{{ propertyComputed }}</div>
</template>
<script>
export default {
data() {
return {
property: 'Example property.'
}
},
computed: {
propertyComputed() {
return this.property
}
},
created() {
console.log('At this point, this.property is now reactive and propertyComputed will update.')
this.property = 'Example property updated.'
}
}
</script>
Neste exemplo, o snippet armazenará property como Example property. Quando o gancho created for executado, ele registrará uma mensagem:
OutputAt this point, this.property is now reactive and propertyComputed will update.
E então property é alterado para Example property updated.
Mais tarde no ciclo de vida, {{ propertyComputed }} aparecerá como Example property updated em vez de Example property.
Nesta etapa, você revisou alguns exemplos de ganchos de criação e está pronto para passar para a próxima parte do ciclo de vida, ganchos de montagem.
Entendendo os ganchos de montagem (inserção DOM)
Ganchos de montagem costumam ser os ganchos mais usados. Eles permitem que você acesse seu componente imediatamente antes e depois da primeira renderização. No entanto, eles não são executados durante a renderização do lado do servidor.
Use ganchos de montagem se precisar acessar ou modificar o DOM do seu componente imediatamente antes ou depois da renderização inicial.
Não use ganchos de montagem se precisar buscar alguns dados para seu componente na inicialização.
Nota: Use criado (ou criado e ativado para componentes keep-alive) para isso. Especialmente se você precisar desses dados durante a renderização do lado do servidor.
antes de montar
O gancho beforeMount é executado logo antes da renderização inicial acontecer e depois que o modelo ou as funções de renderização foram compiladas:
<script>
export default {
beforeMount() {
console.log(`At this point, vm.$el has not been created yet.`)
}
}
</script>
Neste exemplo, quando o gancho beforeMount é executado, este trecho registrará a mensagem:
OutputAt this point, vm.$el has not been created yet.
montado
No gancho mounted, você terá acesso total ao componente reativo, modelos e DOM renderizado (através de this.$el).
Use mounted para modificar o DOM—particularmente ao integrar bibliotecas não-Vue:
<template>
<div ref="example-element">Example component.</div>
</template>
<script>
export default {
mounted() {
console.log(`At this point, vm.$el has been created and el has been replaced.`);
console.log(this.$el.textContent) // Example component.
}
}
</script>
Neste exemplo, quando o hook mounted é executado, este snippet registrará a mensagem:
OutputAt this point, vm.$el has been created and el has been replaced.
Além disso, uma mensagem de Example content. (this.$el.textContent) será registrada.
Nesta seção, você explorou casos de uso para ganchos de montagem. Na próxima etapa, você revisará alguns exemplos que usam ganchos de atualização.
Entendendo os Hooks de Atualização (Diff e Re-render)
Hooks de atualização são chamados sempre que uma propriedade reativa usada por seu componente é alterada ou outra coisa faz com que ele seja renderizado novamente. Eles permitem que você se conecte ao ciclo watch-compute-render para seu componente.
Use ganchos de atualização se precisar saber quando seu componente é renderizado novamente, talvez para depuração ou criação de perfil.
Não use ganchos de atualização se precisar saber quando uma propriedade reativa em seu componente é alterada. Use observadores para isso.
antes de atualizar
O gancho beforeUpdate é executado depois que os dados são alterados em seu componente e o ciclo de atualização começa, logo antes do DOM ser corrigido e renderizado novamente.
Use beforeUpdate se precisar obter o novo estado de qualquer dado reativo em seu componente antes de ser renderizado:
<template>
<div ref="example-element">{{counter}}</div>
</template>
<script>
export default {
data() {
return {
counter: 0
}
},
created() {
setInterval(() => {
this.counter++
}, 1000)
},
beforeUpdate() {
console.log(`At this point, Virtual DOM has not re-rendered or patched yet.`)
// Logs the counter value every second, before the DOM updates.
console.log(this.counter)
}
}
</script>
Primeiro, este snippet armazenará counter como 0. Quando o hook created é executado, ele incrementa o counter a cada 1000 ms. Quando o gancho beforeUpdate for executado, este trecho registrará a mensagem:
OutputAt this point, Virtual DOM has not re-rendered or patched yet.
E um número para contador também é registrado.
Atualizada
O gancho updated é executado depois que os dados são alterados em seu componente e o DOM é renderizado novamente.
Use updated se precisar acessar o DOM após uma mudança de propriedade:
<template>
<div ref="example-element">{{counter}}</div>
</template>
<script>
export default {
data() {
return {
counter: 0
}
},
created() {
setInterval(() => {
this.counter++
}, 1000)
},
updated() {
console.log(`At this point, Virtual DOM has re-rendered and patched.`)
// Fired every second, should always be true
console.log(+this.$refs['example-element'].textContent === this.counter)
}
}
</script>
Primeiro, este snippet armazenará counter como 0. Quando o hook created é executado, ele incrementa o counter a cada 1000 ms. Quando o gancho updated for executado, este trecho registrará a mensagem:
OutputAt this point, Virtual DOM has re-rendered and patched.
E um valor booleano de true é registrado porque o valor renderizado e o valor atual são iguais.
Agora que você explorou o uso de ganchos de atualização, está pronto para aprender sobre ganchos de destruição.
Entendendo os Ganchos de Destruição (Desmontagem)
Ganchos de destruição permitem que você execute ações quando seu componente é destruído, como limpeza ou envio de análises. Eles disparam quando seu componente está sendo removido do DOM.
antes de destruir
beforeDestroy é acionado logo antes da desmontagem. Seu componente ainda estará totalmente presente e funcional.
Use beforeDestroy se precisar limpar eventos ou assinaturas reativas:
<script>
export default {
data() {
return {
exampleLeakyProperty: 'This represents a property that will leak memory if not cleaned up.'
}
},
beforeDestroy() {
console.log(`At this point, watchers, child components, and event listeners have not been teared down yet.`)
// Perform the teardown procedure for exampleLeakyProperty.
// (In this case, effectively nothing)
this.exampleLeakyProperty = null
delete this.exampleLeakyProperty
}
}
</script>
Este snippet armazenará primeiro exampleLeakyProperty. Quando o gancho beforeDestroy for executado, este trecho registrará a mensagem:
OutputAt this point, watchers, child components, and event listeners have not been torn down yet.
E então exampleLeakyProperty é excluído.
destruído
No momento em que você alcança o gancho destroyed, praticamente não resta mais nada em seu componente. Tudo o que estava ligado a ele foi destruído.
Use destroyed se precisar fazer alguma limpeza de última hora ou informar a um servidor remoto que o componente foi destruído:
<script>
import ExampleAnalyticsService from './example-analytics-service'
export default {
destroyed() {
console.log(`At this point, watchers, child components, and event listeners have been torn down.`)
console.log(this)
ExampleAnalyticsService.informService('Component destroyed.')
}
}
</script>
Primeiro, esse snippet importará ExampleAnalyticsService. Quando o gancho beforeDestroy for executado, este trecho registrará a mensagem:
OutputAt this point, watchers, child components, and event listeners have been torn down.
O que resta do componente será registrado no console e ExampleAnalyticsService receberá a mensagem Component destroyed..
Com isso, você concluiu sua revisão geral dos hooks do ciclo de vida do Vue.js.
Outros ganchos
Existem dois outros ganchos, ativado e desativado. Eles são para componentes keep-alive, um tópico que está fora do escopo deste artigo.
Basta dizer que eles permitem que você detecte quando um componente que está encapsulado em uma tag criado e beforeDestroy sem a necessidade de fazer uma reconstrução completa do componente.
Conclusão
Neste artigo, você foi apresentado aos diferentes ganchos de ciclo de vida disponíveis no ciclo de vida da instância Vue.js. Você explorou os diferentes casos de uso para ganchos de criação, ganchos de montagem, ganchos de atualização e ganchos de destruição.
Se você quiser aprender mais sobre Vue.js, confira nossa página de tópicos Vue.js para ver exercícios e projetos de programação.