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 callawait 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 tosetImmediate
orsetTimeout
.- Also, resolved Promise has higher priority over
setImmediate
orsetTimeout
.
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
andPromise
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:
- medium.com