vue中nextTick

Vue nextTick介绍：

Vue nextTick是一个获取更新后DOM的Vue方法；nextTick方法是将回调函数延迟在下一次dom更新数据后调用，也就是当数据更新了，然后在dom中渲染后，就会自动执行nextTick函数。在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。Vue nextTick是一个获取更新后DOM的Vue方法；nextTick方法是将回调函数延迟在下一次dom更新数据后调用，也就是当数据更新了，然后在dom中渲染后，就会自动执行nextTick函数。

nexttick使用场景：

有时需要根据数据动态的为页面某些dom元素添加事件，这就要求在dom元素渲染完毕时去设置、在使用某个第三方插件时 ，希望在vue生成的某些dom动态发生变化时重新应用该插件，也会用到该方法。

nexttick原理：

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。

要理解nextTick，就要理解dom，nextTick是解决dom没有渲染的时候，无法做一些操作，我们想在dom完成后执行的。比如你有一个标签用了<MyComp ref="mycomp" v-if="showComp"></MyComp>然后你有一个函数设置了this.showComp=true。这个时候假如你使用this.$refs.mycomp去获取组件，获取的是空值，因为刚才showComp还是false，刚刚才设置成true，dom还没来得及加载。这个时候我们就需要使用nextTick函数。

为什么数据赋值后，不会立马更新dom
        原因：

vue 更新dom是异步执行的。监听到数据变化，vue会开启一个事件队列，缓冲在同一事件循环中的发生的所有数据变更。如果一个watcher多次被触发，会只推入事件队列一次。在下一个事件循环中，vue刷新队列并执行实际（已去重的工作）

        优点：

便于去重和无意义的dom操作（重复赋值，重复触发watcher），提高效率

        实现：

vue内部对异步队列会会用promise.then ，mutattionObserver 和setImmediate来执行，如果执行环境不支持会采用setTimeout来代替