Vue-$nextTick usage and usage scenarios

concept

• this.$nextTick () delays the execution of the callback until the next DOM update cycle, after the view is updated.

• Use it immediately after modifying the data, and then wait for the DOM to update. No matter how fast the DOM is rendered, it will take time.

solution

this.$nextTick(()=> {
// 需要执行的操作
})

scenes to be used

1. There is a value in data is a=111, when we first modify a=222 in methods, when printing the value. It is found that a=111,

No matter how fast the DOM is updated, it will take time. The this.$nextTick () callback function is executed after the dom is updated.

2. creater () {} is executed before the page is rendered, at this time, using $refs to get the element is undefined, because the dom has not started rendering

// created 里面写一个这个就可以获取到dom元素
this.$nextTick(()=> {
// 需要执行的操作
this.$refs.元素
})

Summarize:

After this process, I believe you have a preliminary deep impression on the usage and usage scenarios of vue-$nextTick, but the situation we encounter in actual development is definitely different, so we need to understand its principle, in case Inseparable from the original. Come on, hit the workers!

Please point out any deficiencies, thank you -- Fengguowuhen