0
点赞
收藏
分享

微信扫一扫

vue中nextTick的使用原理

含义及作用:

nextTick是一个微任务,nextTick中的回调是在下次Dom更新循环结束之后执行的延迟回调,可以用于获取更新后的Dom,总结一句就是在DOM进行下一次更新的时候调用的函数。

为什么会使用nextTick:

vue有一个异步策略,也就是说为什么vue它是异步渲染的?因为每次数据更新或者变化的时候都要去更新和渲染DOM这样会导致vue的性能问题,所以vue有一个异步渲染的策略,就是每次数据变化的时候,vue不会立马去更新或者渲染DOM,而是它会去开启一个队列,把组件更新的函数放在这个队列里,在同一时间循环发生的所有数据变更的时候会异步的去批量更新,这一策略就导致了数据变化vue不会立马去渲染和更新,此时如果想要获取更新后的DOM,那么就要使用nextTick函数。

使用场景:

比如想要在created中获取DOM元素 或者在响应式数据更新之后获取DOM更新后的状态

原理:

就是在更新函数队列后面,插入了一个callback的回调函数,等待更新函数都执行完毕之后,所有DOM操作也就结束了,因为是放在了队列的后面执行,自然获取到的就是最新的DOM。

举报

相关推荐

0 条评论