$nextTick 原理及作用

前提知识：

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个异步队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。

所以：

Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。（数据异步更新）

nextTick在哪使用？原理是什么？

nextTick触发的时机：

同一事件循环中的代码执行完毕 -> DOM 更新 -> nextTick callback触发

 

在以下情况下，会用到nextTick：

1，在数据变化后执行的某个操作，而这个操作需要使用随数据变化而变化的DOM结构的时候，这个操作就需要方法在nextTick()的回调函数中。

2，在vue生命周期中，如果在created()钩子进行DOM操作，也一定要放在nextTick()的回调函数中。