我们先看下面代码示例效果：
（1）示例
<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>
（2）页面效果
我们看到在控制台会抛出一个错误，意思是获取不到div元素。这是涉及到一个概念：异步更新队列。
说明：Vue在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作。然后在下一个事件循环tick中，Vue刷新队列并执行实际（已去重的）工作。所以你用一个for循环来动态改变数据100次，其实它只会应用最后一个改变，如果没有这种机制，DOM就要重绘100次，这是一个很大的开销。
在执行this.showDiv = true;时，div仍然还没有被创建出来，直到下一个Vue事件循环时，才开始创建。$nextTick 就是用来直到什么时候DOM更新完成。
方法修改为：
getText(){
this.showDiv = true;
this.$nextTick(function () {
var text = document.getElementById('div').innerHTML;
console.log(text)
})
}
（3）小结
理论上我们不应该主动操作DOM，因为Vue的核心思想就是数据驱动DOM，但是在很多业务中我们避免不了会使用第三方库，比如popper.js、swiper等，这些基于原生JavaScript的库都有创建和更新及销毁的完整生命周期，与Vue配合使用时，就要利用好$nextTick.