5

Utilizei o método nextTick() algumas vezes, principalmente quando preciso alterar algo no DOM, porém, não entendi exatamente qual a sua finalidade. Alguém pode me dar exemplos da sua finalidade correta?

Segue um exemplo do uso do método nextTick()

mounted() {
    this.$nextTick(function() {
      window.addEventListener("resize", this.getWindowWidth);
    });
  },
2
  • Eu suponho que seja algo parecido com Angular. Ele altera os bindings dele com base em ciclos enquanto você permanece na página. Acho que esse $nextTick pode ser usado para isso.
    – mutlei
    23/10/2018 às 20:52
  • O nextTick pode ser utilizado quando o projeto possui algum plugin que necessite do jQuery. Dessa forma você pode usar o nextTick para forçar a reinicialização do plugin quando houver mudança nos dados. 23/10/2018 às 21:20

1 Resposta 1

5

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .