Se utiliza o nextTick
quando você precisa manipular o DOM(HTML) com uma ação não relacionada à reatividade o Vue ou ao seu ciclo de vida.
O Vue atualiza o DOM(HTML) de maneira reativa, ou seja, apenas quando há alteração nos dados de um componente.
Como uma manipulação direta no DOM(HTML) não interage com o ciclo de vida do componente, o Vue não sabe o que ocorreu e por isso não responde à sua ação, que por muitas vezes resulta na sua lógica sendo executada antes de um resultado esperado.
A maneira de garantir a iteração com o ciclo de vida do Vue é usando nextTick
, que vai executar a sua lógica após a próxima re-renderização do DOM(HTML)
Veja o exemplo abaixo.
Tem um header que sua visibilidade é controlada por um v-if
, que torna esse processo ligado ao ciclo de vida do Vue, se o valor de isHeaderVisivel
for false
na re-renderização do DOM o header vai ser removido do DOM se for true
ele será reinserido no DOM e assim ficando visível.
Há 4 botões, 2 para com lógica para apresentar o Header e 2 com lógica para esconder o Header.
Quando altero a visibilidade do Header eu atualizo um status
falando se o Header esta visivel ou não, porém faço isso manipulando o DOM diretamente, verificando se o Header é encontrado no DOM ou não.
Então para te mostrar a função do nextTick
os botões estão dividos entre os que usam nextTick
e os que não usam nextTick
, teste e veja o resultado.
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
data,
methods: {
onMostrarHeaderSemTick,
onEsconderHeaderSemTick,
onMostrarHeaderComTick,
onEsconderHeaderComTick,
_atualizarStatusHeader
}
});
function data() {
return {
isHeaderVisivel: true
}
}
function onMostrarHeaderSemTick() {
this.isHeaderVisivel = true;
this._atualizarStatusHeader();
}
function onEsconderHeaderSemTick() {
this.isHeaderVisivel = false;
this._atualizarStatusHeader();
}
function onMostrarHeaderComTick() {
this.isHeaderVisivel = true;
this.$nextTick(() => this._atualizarStatusHeader());
}
function onEsconderHeaderComTick() {
this.isHeaderVisivel = false;
this.$nextTick(() => this._atualizarStatusHeader());
}
function _atualizarStatusHeader() {
const header = document.querySelector('#header');
const statusHeader = document.querySelector('#status-header');
statusHeader.removeChild(statusHeader.firstChild);
if (header) {
statusHeader.appendChild(document.createTextNode('Visível'));
} else {
statusHeader.appendChild(document.createTextNode('Invisível'));
}
}
h1 {
font-size: 14px;
}
button {
border: none;
}
.sem-tick {
background-color: lightyellow;
color: red;
}
.com-tick {
background-color: lightblue;
color: green;
}
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<div id="app">
<p>
O Header está: <strong id="status-header">Visível</strong>
</p>
<hr />
<button
class="sem-tick"
@click="onMostrarHeaderSemTick">
Mostrar Header SEM Tick
</button>
<button
class="sem-tick"
@click="onEsconderHeaderSemTick">
Esconder Header SEM Tick
</button>
<hr />
<button
class="com-tick"
@click="onMostrarHeaderComTick">
Mostrar Header COM Tick
</button>
<button
class="com-tick"
@click="onEsconderHeaderComTick">
Esconder Header COM Tick
</button>
<h1
id="header"
v-if="isHeaderVisivel">
HEADER
</h1>
</div>
Veja mais nessa sessão da documentação.
$nextTick
pode ser usado para isso.nextTick
pode ser utilizado quando o projeto possui algum plugin que necessite do jQuery. Dessa forma você pode usar onextTick
para forçar a reinicialização do plugin quando houver mudança nos dados.