vuejs2 - What is nextTick and what does it do in Vue.js?

Question

I read the docs, but I still can't understand it.

I know what data, computed, watch, methods do, but what is nextTick() used for in Vue.js?

Answer 1

It's all about Timing

nextTick allows you to execute code after you have changed some data and Vue.js has updated the virtual DOM based on your data change, but before the browser has rendered that change on the page.

Normally, devs use the native JavaScript function setTimeout to achieve similar behavior, but using setTimeout relinquishes control over to the browser before it gives control back to you (via calling your callback).

Example

Let's say you changed some data; Vue then updates the vDOM based on that data change (the changes are not yet rendered to the screen by the browser).

If you used nextTick at this point, your callback would get called immediately, and the browser would update the page after that callback finished executing.

If you instead used setTimeout, then the browser would have a chance to update the page, and then your callback would get called.

You can visualize this behavior by creating a small component like the following:
_{(Check this fiddle to see it live)}

<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 this.$nextTick with setTimeout:

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

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

That's because, with setTimeout:

1. Vue updated the vDOM to say "Two"
2. Vue gave control to the browser
3. The browser displayed "Two"
4. Callback was called
5. Vue updated the vDOM to say "Three"
6. Vue gave control to the browser
7. The browser displayed "Three"

But with nextTick, we skip steps 2 and 3! Instead of passing over control after the first vDOM update, Vue calls the callback immediately, which prevents the browser from updating until the callback is finished. In this example, that means "Two" is never actually displayed.

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

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