在钩子中使用
一般在调用mounted()和created()的时候,dom都是还没有的,如果此时要进行dom操作的话,需要调用nexttick(),把进行dom操作的js代码放进nexttick的回调函数中。
在dom更新后,对dom进行操作
此时,对dom的操作也需要放在nexttick的回调函数中,也就是说在你更改了视图中的数据后,你想立即对视图进行新的操作时,应该调用nexttick函数,将操作放在该函数的回调函数中。
实际使用
使用element-plus组件库中的toggleRowSelection数据回显失效
将个体数据与总数据对比,如果数据相同,则勾选相应选项,toggleRowSelection会自动调用selection-change事件,在例子中有两个相同的数据,应该调用两次selection-change,但实际上却调用了三次,并且在最后一次清空了选项。后面查阅了资料,发现可以调用nexttick,在回调函数中进行dom操作,调用toggleRowSelection勾选对应的选项。
在此猜想或许是在Vue文档中提到的:
当你在 Vue 中更改响应式状态时,最终的 DOM 更新并不是同步生效的,而是由 Vue 将它们缓存在一个队列中,直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变,都仅执行一次更新
此前的方法对dom进行操作都不是同步生效的。