vue 异步执行DOM更新的原理：
vue 在观看到数据变化时，并不是直接更新dom,而是去开启一个队列，并缓冲在同一事件发送的所有数据变化。在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作。然后在下一个事件循环tick中，Vue刷新队列并执行实际（已去重）工作。所以你用一个for循环来动态改变数据100次，其实它只会应用最后一个改变，如果没有这种机制，DOM就会重绘100此，这是一个很大的开销。
<body>
<div id="app" >
<div id='div' v-if="showDiv">这是一段文本</div>
<button @click="getText">获取div内容</button>
</div>
</body>
<script >
var app = new Vue({
el:'#app',
data : {
showDiv: false,
},
methods: {
getText(){
this.showDiv = true;
var text = document.getElementById('div').innerHTML;
console.log(text)
}
}
})
</script>
20190429145611194.png
2019042914562621.png
如上面的案列会抛出一个错误，意思是获取不到div元素，原因就是，当我们点击button在执行this.showDiv = true;时，div仍然还没有被创建出来，直到下一个Vue事件循环时，才开始创建。
而nextTick() 就是用来直到什么时候DOM更新完成，才会去调用$nextTick内的回调函数。方法修改为：
getText(){
this.showDiv = true;
this.$nextTick(function () {
var text = document.getElementById('div').innerHTML;
console.log(text)
})
}
$nextTick()应用场景
- 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中
在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。
- 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中
小结
理论上我们不应该主动操作DOM，因为Vue的核心思想就是数据驱动DOM，但是在很多业务中我们避免不了会使用第三方库，比如popper.js、swiper等，这些基于原生JavaScript的库都有创建和更新及销毁的完整生命周期，与Vue配合使用时，就要利用好$nextTick
