关于Vue中nexttick的使用

35 阅读1分钟

在钩子中使用

一般在调用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进行操作都不是同步生效的。