上一主题 下一主题
返回列表 发新帖

vue的nextTick和setInterval那点事

[复制链接]

82

主题

556

帖子

771

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
771
发表于 2021-2-12 16:08:55 | 显示全部楼层 | 阅读模式

nextTick是什么?

nextTick就是在vue的dom更新之后,回调某些函数进行一些处理

为什么有时候使用nextTick没有反应

因为某些时候在你使用nextTick可能组件内部也在使用nextTick

这个时候目前我认为唯一个解决方法就是在nextTick后继续nextTick或者使用setinterval

使用nextTick的原理是在对方处理之后我们再次处理,多次嵌套

使用setinterval的原理是任务队列的不同

为什么setinterval可以在所有nextTick最后执行?

在 Vue 2.4 之前都是使用的 microtasks,但是 microtasks 的优先级过高,在某 些情况下可能会出现比事件冒泡更快的情况,但如果都使用 macrotasks 又可能会出现 渲染的性能问题。所以在新版本中,会默认使用 microtasks,但在特殊情况下会使用 macrotasks,比如 v-on。

microtasks是微任务

macrotaks是宏任务

通常的处理方式是主任务点-》微任务队列-》宏任务队列

因为nextTick在通常情况下属于微任务队列

而setinteval属于宏任务队列

所以一般会在nexttick执行完成后再调用setinterval

回复

使用道具 举报

发表回复

本版积分规则

快速回复 返回顶部 返回列表