The role of vue's nextTick

Many people don't understand what vue's nextTick is for.

To understand nextTick, we must understand dom. NextTick is to solve some operations that cannot be done when dom is not rendered. We want to execute it after dom is completed.

For example, you have a tag that uses <MyComp ref="mycomp" v-if="showComp"></MyComp>

Then you have a function that sets this.showComp=true

At this time, if you use this.$refs.mycomp to get the component, what you get is a null value, because just now showComp is still false, it was set to true just now, and the dom hasn’t been loaded yet. At this time we need to use the nextTick function.

For example, the following code:

this.showComp=true;

this.$nextTick(()=>{
	this.$refs.mycomp.refresh();
});

This.$refs.mycomp.refresh() cannot be placed outside, such as in the nextTick function.