nextTick execution order

[s-elo]

I encountered a scenario where I called nextTick multiple times and the callbacks are called in reverse order, not sure if this is expected, if so, may I know the reason?

export default {
   data() {
       return { foo: 16 }
   },
   watch: {
      data(value) {
         console.log('instant watch', value)
         this.$nextTick(() => { console.log('nextTick', value) })
      }
   },
   updated() {
      console.log('updated')
      if (this.foo >= 15) {
         this.foo = this.foo - 1
      }
   },
   methods: {
      click() { this.foo = this.foo - 1 }
   }
}

As the above snippet, when I trigger the click method, the logs would be like:

'instant watch 15'
'updated'
'instant watch 14'
'updated'
'nextTick 14'
'nextTick 15'

[edison1105]

Playground

First, this is not considered a bug because you are updateing the state in updated hook. The two nextTick calls are placed in different queues:

• The first call is placed in currentFlushPromise.then
• The second call in placed in resolvedPromise.then, bacause currentFlushPromise is already reset to null when render completed.

Additionally, updating data in updated hook is not recommended as it may cause the component to continuouly re-render.

[s-elo]

okay I see thx~, so can I understand that the previous nextTicks will not run until the state changing effects in undated hooks have finished?

I'm not really familiar with the source code, don't know exactly why updating the state in updated hook will cause this.

plus, I actually migrate this from vue2, in vue2 it would be like:

'instant watch 15'
'updated'
'nextTick 15'
'instant watch 14'
'updated'
'nextTick 14'