What is the purpose of the nextTick() method?

Question

I used the method nextTick() sometimes, especially when I need to change something in the DOM, however, I don’t understand exactly what its purpose is. Can anyone give me examples of their right purpose?

Here is an example of the use of the method nextTick()

mounted() {
    this.$nextTick(function() {
      window.addEventListener("resize", this.getWindowWidth);
    });
  },

Answer 1

Whether to use the nextTick when you need to manipulate the DOM(HTML) with an action not related to the reactivity of Vue or its life cycle.

Vue updates the DOM(HTML) in a reactive way, that is, only when there is a change in the data of a component.

As a direct manipulation in DOM(HTML) does not interact with the component’s life cycle, Vue does not know what happened and therefore does not respond to its action, which often results in its logic being executed before an expected result.

The way to ensure iteration with the Vue lifecycle is by using nextTick, which will execute its logic after the next DOM (HTML re-rendering)

See the example below.

Has a header that your visibility is controlled by a v-if, which makes this process linked to the life cycle of the Vue, if the value of isHeaderVisivel for false in DOM re-rendering the header will be removed from the DOM if it is true he will be reinserted into the GIFT and thus becoming visible.

There are 4 buttons, 2 stops with logic to display the Header and 2 with logic to hide the Header.

When I change Header visibility I update a status speaking if the Header is visible or not, but I do this by manipulating the DOM directly, checking whether the Header is found in the DOM or not.

So to show you the function of nextTick the buttons are divided between the ones that use nextTick and those who don’t nextTick, test and see the result.

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/[email protected]/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>

See more in this session of documentation.