nextTick的原理

nextTick是什么

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

nextTick的原理

由于JavaScript是单线程的, 所以js是通过事件循环机制来实现单线程一异步的。在事件循环中，有一个概念叫做“任务队列”。任务队列中保存了需要在事件循环中执行的任务，这些任务分为两种类型︰宏任务和微任务。

在任务队列中，

• 宏任务 : script、ajax、setTimeout、setInterval、DOM的事件监听、I/O操作等，
• 微任务 : Promise、async await 、 MutationObserver(监视DOM元素变化)等。

在事件循环中，

1. 先执行scrip宏任务
2. 再依次取出微队列中所有的微任务执行
3. 再取出宏队列中的第一个宏任务执行
4. 再依次取出微队列中所有的微任务执行

… 重复第三步和第四步,直到任务队列中的任务执行完毕

Vue有个异步更新策略，如果数据变化，它不会立刻更新DOM，而是开启队列，把组件更新函数保存在队列中，在同一事件循环中发生的所有数据变更, 会异步的批量更新。这导致对数据的修改不会立即体现在DOM上，此时如果要获取更新后的DOM状态，就需要使用nextTick。

在开发中需要用到nextTick的地方

1. 正常提交表单, 校验数据准确性,会调用 this.$refs.form.validate
   但是form在某些场景下会自动校验,就会调用这个方法, 要获取dom元素,却没有获取到, 因为dom渲染是异步渲染的,在同步代码执行完, 在异步队列中走任务线程,这时候dom才能完成渲染, nextTick是在dom渲染完成异步线程执行完之后才调用的一个方法
2. created中想要获取DOM时;
3. 响应式数据变化后获取DOM更新后的状态，比如获取列表更新后的高度。