转：Vue.js（22）之 nextTick()

简单理解Vue中的nextTick

 

nextTick的主要应用的场景及缘由

在Vue生命周期的  created()钩子函数 进行的DOM操做必定要放在 Vue.nextTick() 的回调函数中

• 解释：在created()钩子函数执行的时候 DOM 其实并未进行任何渲染，而此时进行 DOM 操做无异于徒劳，因此此处必定要将DOM操做的js代码放进Vue.nextTick()的回调函数中。

• 与之对应的就是mounted()钩子函数，由于该钩子函数执行时全部的 DOM 挂载和渲染都已完成，此时在该钩子函数中进行任何 DOM 操做都不会有问题

在数据变化后要执行的某个操做，而这个操做须要使用随数据改变而改变的DOM结构的时候，这个操做都应该放进Vue.nextTick()的回调函数中。

 

Vue 的官方文档中详细的解释：

Vue异步执行DOM更新。只要观察到数据变化，Vue将开启一个队列，并缓冲在同一个时间循环中发生的全部数据变化。

若是同一个Watcher被屡次触发，只会被推入到队列中一次。 这种在缓冲时去除重复数据对于避免没必要要的计算和DOM操做是很是重要的。

而后，在下一个的事件循环tick中，Vue刷新队列并执行实际（已去重的）工做。

Vue 在内部尝试对异步队列使用原生的Promise.then 和 MessageChannel，若是执行环境不支持，会采用setTimeout(fn, 0)代替。

 

例如，当你设置vm.someData = 'new value'时，该组件不会当即从新渲染。

当刷新队列时，组件会在事件循环队列清空时的下一个tick更新。

多数状况咱们不须要关心这个过程，可是若是你想在DOM 状态更新作点什么，这就可能会有些棘手。

虽然 Vue.js 一般鼓励开发人员沿着“数据驱动”的方式思考，避免接触DOM，可是有时咱们必需要这么作。

为了在数据变化以后等待Vue完成更新DOM，能够在数据变化后当即使用Vue.nextTick(callback)。这样回调函数在DOM更新完成后调用。