说说nextTick API的使用和原理

219 阅读1分钟

nextTick是做什么的?

nextTick 是等待下一次DOM更新刷新的工具方法。

Vue异步更新策略

如果数据变化,Vue不会立刻更新DOM,而是开启一个队列,把组件更新函数保存在队列中,在同一事件循环中发生的所有数据变更会异步的批量更新。

使用nextTick可以获取更新后的DOM状态。

使用场景

  • created中想要获取DOM时;

  • 响应式数据变化后获取DOM更新后的状态;

如何使用nextTick

function nextTick(callback?:()=>void):Promise<void>

在传入的回调函数中访问最新DOM状态即可,或者await nextTick()方法返回的Promise之后做这件事。

源码底层原理

在Vue内部,nextTick能够让我们看到DOM更新后的结果,是因为我们传入的callback会被添加到队列刷新函数flushSchedulerQueue的后面,这样等队列内部的更新函数都执行完毕,所有DOM操作也就结束了,callback自然能够获取到最新的DOM值。