$nextTick 用法与原理详解

1： $nextTick  用法于原理：

在Vue 中更新DOM 是异步的， nextTick的主要应用的场景及原因。

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

在 Vue生命周期函数中 created钩子函数中： DOM 并没有进行任何渲染， 而此时进行DOM 操作无异于是徒劳的， 所以此处一定将DOM 操作的js 代码放进Vue.nextTick 回调函数中， 与之对应的就是mounted() 

 钩子函数， 因为该钩子函数执行时所有的DOM 挂载和渲染都已经完成， 此时在该钩子函数中进行任何操作都不会有问题。

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

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

 vue 执行dom 更新是异步的， 只要是观察到数据变化， vue  将会开启一个队列， 并缓冲在同一事件循环中发生的所有数据改变。 如果同一个watcher 被多次触发，只会被推如到队列中一次。 在这种缓冲时去除重复数据对于避免不必要的计算， 和DOM 操作非常重要。 然后下一个事件循环 “tick”中， vue 刷新队列执行实际（去重）工作。 在Vue 内部尝试对异步队列使用原生的promise.then 和 MessageChange, 如果

执行环境不支持， 会采用setTime（（）=> {} , 0）代替。