Why doesn't vue update data after nexttick?

Question

I am trying to learn about vuejs nexttick methods and I'm not sure why message isn't being updated after nexttick in this example..

new Vue({
  el: '#app',
  data: {
    message: 'one'
  },
  created() {
    this.message = 'two';
    this.$nextTick(() => {
      this.message = 'three';
    });
    this.message = 'four'
  }
})

If I echo it using

<div id="app">
  <p>{{ message }}</p>
</div>

I only see three. I understand after why one and two are showng because nexttick() changes the data rapidly, but why is four not shown instead?

kmc059000 kmc059000 · Accepted Answer · 2017-12-15T21:48:27

When you call $nextTick(), it schedules the inner function to be run in the next tick. However, the function that is calling $nextTick() will complete before the function passed into nextTick() will be called.

Here is the offical documenation for $nextTick() https://vuejs.org/v2/api/#vm-nextTick

Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update. This is the same as the global Vue.nextTick, except that the callback’s this context is automatically bound to the instance calling this method.

this.message = 'three'; is getting executed last, which is why you always see "three"

Your code actually executes in the following order:

this.message = 'two';
this.message = 'four'
//then in the next tick of the event loop / DOM update which is likely instantaneous
this.message = 'three';

The order of your code in your file does not determine the order in which it is actually executed by the javascript engine.

Why doesn't vue update data after nexttick?

2 Answers