What is the purpose of the nextTick () method?

Question

What is the purpose of the nextTick () method?

Navigation

#1 by (4 votes)

5

I've used the nextTick() method a few times, especially when I need to change something in the DOM, but I did not quite understand what it was for. Can anyone give me examples of their correct purpose?

Here is an example of using the nextTick()

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

vue.js

asked by anonymous 23.10.2018 / 22:34

1 answer

Apply datepicker to a dynamic input with Jquery Doubt how to measure the number of words between two specific words in a string in R

score 4 · Accepted Answer

If you use nextTick when you need to manipulate the DOM (HTML) with an action unrelated to 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 the DOM does not interact with the component's life cycle, Vue does not know what has 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.

It has a header whose visibility is controlled by a v-if , which makes this process connected to the Vue lifecycle, if the value of isHeaderVisivel is false in the re-rendering of the DOM the header will be removed from the DOM if it is true it will be reinserted into the DOM and thus becoming visible.

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

When I change the visibility of the Header, I update a status speaking whether 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.

Then to show you the function of nextTick the buttons are divided between those that use nextTick and those that do not use 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><divid="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 the documentation .