What is Vue.nextTick?

Vue.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.

Vue.nextTick([callback, context])

// modify data
vm.msg = 'Hello'
// DOM not updated yet
Vue.nextTick(function () {
  // DOM updated
}

• immediately , DOM update , Callback.
• Promise , Async / Await is also available

 // usage as a promise (2.1.0+, see note below)
Vue.nextTick()
  .then(function () {
    // DOM updated
  })

First GIF vs Second GIF

pic courtesy : medium.com

pic courtesy : medium.com

Can you see the difference?

The first gif uses $nextTick method

async handleFiles(fileList: FileList): Promise<void[]> {
  this.isFileUploaded = true; // does not work until all Promise are resolved
  
  await this.$nextTick(); // console.log(this.isFileUploaded) // true
  
  const directory = await carfsModule.setupSubDirectory();
  ...
}

• if a user clicks upload text on the gifs, handleFiles function is executed.
• It is a Promise function that essentially setup the directory & upload the files on the created directory and isFileUploaded is a state which triggers the UI change.
• The second gif has a UX problem that it seems like the page is frozen because the UI has no change at all until the all the Promises are settled (which might takes ms to few seconds)
• It is Update the isFileUploaded state before Promise API call await carfsModule.setupSubDirectory() will solve the issue

this.isFileUploaded = true;
const directory = await carfsModule.setupSubDirectory();
/// ... 

• isFileUploaded state is still updated AFTER / At the same time the Promise APIs are resolved [which is Second Gif ].
• we solve the issue with using this.$nextTick()
• this.$nextTick() helps updating the isFileUploaded state immediately (Before the Promise API) [which is First Gif ].

this.isFileUploaded = true; // does not work until all Promise are resolved
await this.$nextTick(); // console.log(this.isFileUploaded) // true    const directory = await carfsModule.setupSubDirectory();

process.nextTick in Node.js

In node.js, nextTick helps its callback function to execute prior to other callback functions in Event loop.

setImmediate(() => {
  console.log('immediate');
});

process.nextTick(() => {
  console.log('nextTick');
});

setTimeout(() => {
  console.log('timeout');
}, 0);

Promise.resolve().then(() => console.log('promise'));

has an output of :

nextTick
promise
timeout
immediate

• process.nextTick executes prior to setImmediate or setTimeout.
• Also, resolved Promise has higher priority over setImmediate or setTimeout.

Back to our example

nextTick has a priority over Promise.resolve , setTimeout , setImmediate.

Let’s check this out example:

setTimeout(() => {
  console.log('timeout');
}, 0);

Promise.resolve().then(() => console.log('promise'));

console.log('helloworld3');

process.nextTick(() => {
  console.log('nextTick');
});

console.log('helloworld5');

has an output of:

helloworld3
helloworld5
nextTick
promise
timeout

In other words, isFileUploaded state will convert from false to true as a priority regardless of its place in the function.

 
async handleFiles(fileList: FileList): Promise<void[]> {
  // this.isFileUploaded = true;
  
  await this.$nextTick();
  
  // this.isFileUploaded = true;
  
  const directory = await carfsModule.setupSubDirectory();
  
  // this.isFileUploaded = true;
}

• Microtask : process.nextTick and Promise are often called as microtask.

pic courtesy : medium.com

For more Information and to build the website using Vue.js, Hire Vue.js Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop the custom website using Vue.js, please visit our technology page.

Content Source:

1. medium.com