Vue3 Nexttick

Posted on  by admin

Prerequisites

In this article, you will learn about the Vue.nextTick callback function and when to make use of it.

In plain terms, Vue.nextTick gives you access to the data instance after it has been updated, the new changes effected on the DOM but not yet rendered on the web page.

  • We can visualize its role by updating our data instance during the mounted life cycle hook and catching its effect midway.
  • This would update our instance and render the new message.
  • Let’s add the Vue.nextTick function, refresh our page and observe the change.

When we reload the page we see the third message rendered.

  • You start reading Vue’s documentation, and everything seems under control.
  • Props, components, events.
  • So far so good.

This is easier than expected.

But then, as if it were a wild Pokémon, something unexpected appears. Just when I started to understand Vue….

Understanding $nextTick

Anyway, you don’t panic. You know the drill: calm down and RTFM (internet slang here). I mean, Vue documentation is famous for being one of the best out there, right?

By the way, this is also valid for Vue 3! Vue.nextTick( [callback, context] )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. The what is executed after the next what has what?

I feel your pain.

  • But fear no more! Vue’s nextTick() may look intimidating at first, but two things you must know:.
  • Its usage is…uncommon. Like one of those silver Magic cards.

How nextTick Works in Vue.js?

  • I have written several Vue apps and ran into nextTick() once or twice.

  • It’s easier to understand once you’ve seen some use cases.

  • After you get the idea, the fear will go away, and you’ll have a handy tool under your belt.

  • Let’s go for it, then.

A last piece of coolness

We are programmers, aren’t we? We’ll use our beloved divide and conquer approach to try to translate the description of nextTickbit by bit.

It starts with:. Defer the callback. Ok, now we know it accepts a callback.

So it looks like this:. This callback is deferred (this is how millenials say delayed) until….

the next DOM update cycle. We know that Vue performs DOM updates asynchronously.

setTimeout vs. nextTick

It features a way of keeping these updates “stored” until it needs to apply them. It creates a queue of updates and flushes it when needed. Then, the DOM is “patched” and updated to its latest version.

Recommended Articles

Let me try again: Imagine your component does something really essential and smart like this.potatoAmount = 3.

Examples of Vue.js nextTick

Vue won’t re-render the component (and thus the DOM) automatically. It’ll queue up the required modification. Then, in the next “tick” (as in a clock), the queue is flushed, and the update is applied.

So we know that we can use nextTick() to pass a callback function that is executed right after the data is set and the DOM has updated. I can hear your brain screaming. OMG Adri y u need dis. As I said earlier… not that often. The “data flow” approach that drives Vue, React, and the other one from Google, which I won't mention, makes it unnecessary most of the time. Yet, sometimes we need to wait for some elements to appear/disappear/be modified in the DOM. This is when nextTick comes in handy.

Use it immediately after you’ve changed some data to wait for the DOM update. This is the last piece of definition that Vue docs provided to us.

Inside our callback, the DOM has been updated so we can interact with the “most updated” version of it. Check this Codepen. Open the console, and you’ll see that the value of our data is updated only inside the callback of nextTick:.

See the Pen nextTick playground by Adrià (@afontcu) on CodePen.

Prove it

Let’s try to define some useful use case for it. Imagine that you need to perform some action when a component is mounted. not only the component. You also need to wait until all its children are mounted and available in the DOM.

A use case

Our mounted hook doesn’t guarantee that the whole component tree renders. If only we had a tool to wait for the next DOM update cycle….

So: nextTick is a comfortable way to execute a function after the data has been set and the DOM has updated.