Nesse artigo eu explico como o Vuejs nextTick() funciona durante o seu ciclo. É muito importante entender o que está acontecendo por de trás dos bastidores para que você usufrua de todo o potencial dessa função nativa do Vue js 2.x.
O Vuejs nextTick() é uma função do core do Vue.js 2.0 e está disponível de qualquer componente bastando utilizar simplesmente this.$nextTick(). Outra característica do é que ele retorna uma promessa e por isso pode aninhar o .then() ou então implementar o async/await.
Ahh! Não sabe o que é async await no javascript? Dá uma olhada nesse vídeo aqui https://youtu.be/3158VWp1L9I e fique por dentro dessa modernidade do js.
Como realmente o Vuejs nextTick funciona
Então, o Vue js realiza atualizações do DOM de forma assíncrona. Sempre que uma alteração de dados é feita e observada pelo framework, o Vue.js abre uma fila e armazena em buffer todas as alterações de dados que ocorrem no mesmo loop de eventos. Se o mesmo “watcher” for acionado várias vezes, ele será empurrado para a fila apenas uma vez. Em seguida, no próximo loop de evento “tick”, o Vue libera a fila e executa o trabalho real. Ou seja, ele vai atualizar o DOM como esperamos.
Por exemplo, quando você define uma variável title = 'Hello World', o componente não será renderizado imediatamente. Ele será atualizado no próximo “tick”, quando a fila for liberada. Na maioria das vezes, ou quase sempre, não precisamos nos preocupar com isso, mas pode ser complicado quando você deseja fazer algo que depende do estado do DOM pós-atualização. Embora o Vue.js geralmente incentive os desenvolvedores a pensar de maneira “orientada a dados” e evitar tocar diretamente no DOM, às vezes pode ser necessário fazer este trabalho sujo hahaha.
Então, para esperar que Vue.js termine de atualizar o DOM após uma alteração de dados, você pode usar a função nativa do core Vue.nextTick(). O callback será chamado após a atualização do DOM.
Vamos deixar de blá blá blá e partir para um exemplo prático.
Mas antes disso, eu recomendo assistir ao vídeo, pois exemplifico isso na prática.
Bom, mas se você gosta de ler vamos lá…
Tenha em mente este pequeno componente
<template>
<div>
{{ title }}
</div>
<template>
<script>
export default {
data() {
return {
title: '',
};
},
mounted() {
this.title = 'Hello World!';
},
},
</script>
Se a gente tentar pegar o conteúdo da div logo após alterar o valor do título no mounted() hook, veremos que a div está vazia.
mounted() {
this.title = 'Hello World!';
console.log(this.$el.textContent);
}
Ué! Em teoria eu deveria pegar o conteúdo real da div que é o próprio title, certo?
Hmmm, nem tanto. Isso acontece por que estamos tentando pegar o conteúdo da div antes da atualização do DOM pelo Vue.js.
Lembra lá no início que falei que a atualização do DOM não é imediata? Mas, é tão rápido que parece ser em tempo real ⚡️
Agora a gente vai acrescentar outro console.log usando o $nextTick() e você verá que conseguiremos pegar o conteúdo da div como esperávamos.
mounted() {
this.title = 'Hello World!';
console.log(this.$el.textContent);
this.$nextTick(() => {
console.log(this.$el.textContent);
});
}
Thanrannnnn… Agora sim, o conteúdo vem direitinho. Isso acontece por que o $nextTick() esperou a última fila de atualização do DOM e então depois executou o console.log.
E, como falei lá no início também, o $nextTick() retorna uma promessa e você pode fazer isso aqui que terá o mesmo resultado:
async mounted() {
this.title = 'Hello World!';
console.log(this.$el.textContent);
await this.$nextTick();
console.log(this.$el.textContent);
}
Mas lembre-se que você tem que ficar fera em promessa para poder utilizar essa técnica.
Se ainda tem dúvida sobre promessa usando o async/await clica no link do vídeo no topo do artigo que te espero lá.
Bom, eu fico por aqui. Comenta ai em baixo o que achou dos conceitos do Vuejs nextTick e seu ciclo de vida tick tock tick tock.
Valeu jovem, abs.
