nextTick的作用吗，谈谈对它的理解，是什么，怎么用

这个面试题，也是面试官常问的问题。

首先你得知道它是来干嘛的? 

获取真实dom节点（注意：是异步的）

还需要思考为什么有这个存在呢，得知道原因吧！

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

有些面试官可能还要刁难你，非的追问你原理。

因为Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOM操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。

当然它的使用场景呢

Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中----------这个周期未挂载dom节点

更改数据后当你想立即使用js操作新的视图的时候需要使用它

下面示例，可以方便大家深入理解一下

<div id="example">{{message}}</div>


var vm = new Vue({
  el: '#example',
  data: {
    message: 'old message'
  }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent  // 'old message'
Vue.nextTick(function () {
  vm.$el.textContent  // 'new message' 
})

 当你设置 vm.message = 'new message'，该组件不会立即重新渲染。当刷新队列时，组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程，但是如果你想基于更新后的 DOM 状态来做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。

最后有可能还会问到，nextTick和setTimeout区别？

首先Vue 在更新 DOM 时是异步执行的，也就是说数据变了，DOM不会立即改变，那么我们是如何知道DOM什么时候会改变呢？也就是说如何知道异步后的触发时机呢？

可以通过nextTick方法，这个方法在源码内，先监听是否具备Promise.then，利用promise来监听，如果当前环境不支持promise，那么就降级采用MutationObserver，如果MutationObserver不支持的话，那么就降级采用setImmediate，如果setImmediate不支持的话，那么就使用setTimeout(fn, 0)。

所以说nextTick和setTimeout区别总结就是：nextTick会先尝试使用promise、MutationObserver、setImmediate这些技术去监听，如果都不支持才会采用setTimeout