What is nextTick or what does it do in VueJs

Question

I read the docs, but I can't understand it. I know what data, computed, watch, methods do but what is nextTick() use for in vuejs?

The key concept to understand is that the DOM is updated asynchronously. When you change a value in Vue, the change is not immediately rendered to the DOM. Instead, Vue queues a DOM update and then, on a timer, updates the DOM. Normally, this happens so fast that it doesn't make a difference, but, at times, you need to update the rendered DOM after Vue has rendered it, which you can't immediately do in a method because the update hasn't happened yet. In those cases, you would use nextTick. Documented here. — Bert
Complementing what @Bert said in https://stackoverflow.com/q/47634258/9979046 above, the nextTick() will be used in Unit Tests, when you need to check if a element exists in DOM (HTML), for example, if you get some information on a Axios request. — Oscar Alencar
why do I feel like nextTick is something like const nextTick = (callback, context) => { setTimeout(callback.bind(context), 0); }; ? — SparK

Prashant Prashant · Accepted Answer · 2017-12-04T15:00:00

nextTick allows you to do something after you have changed the data and VueJS has updated the DOM based on your data change, but before the browser has rendered those changed on the page.

Normally, devs use native JavaScript function setTimeout to achieve similar behavior. But, using setTimeoutrelinquishes control over to the browser before it gives control back to you via your callback.

Let's say, you changed some data. Vue updates DOM based on the data. Mind you the DOM changes are not yet rendered to the screen by the browser. If you used nextTick, your callback gets called now. Then, browser updates the page. If you used setTimeout, your callback would get called only now.

You can visualize this behavior by creating a small component like the following:

<template>
  <div class="hello">
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
        msg: 'One'
    }
  },
  mounted() {
      this.msg = 'Two';

      this.$nextTick(() => {
          this.msg = 'Three';
      });
  }
}
</script>

Run your local server. You will see the message Three being displayed.

Now, replace your this.$nextTick with setTimeout

setTimeout(() => {
    this.msg = 'Three';
}, 0);

Reload the browser. You will see Two, before you see Three.

Check this fiddle to see it live

That's because, Vue updated the DOM to Two, gave control to the browser. Browser displayed Two. Then, called your callback. Vue updated the DOM to Three. Which the browser displayed again.

With nextTick. Vue udpated the DOM to Two. Called your callback. Vue updated the DOM to Three. Then gave control to the browser. And, the browser displayed Three.

Hope it was clear.

To understand how Vue implements this, you need to understand the concept of Event Loop and microtasks.

Once you have those concepts clear(er), check the source code for nextTick.

What is nextTick or what does it do in VueJs

4 Answers