原理：
vue 是异步执行DOM更新的，一旦检测到数据变化，就会开启一个新的队列，然后把同一个事件循环中观测到数据变化的watcher推送进这个队列。如果这个watcher被多次触发，只会被推送一次。可以有效避免不必要的计算跟dom操作。而下一个事件循环时，vue会清空队列,并进行必要的DOM更新
当你设置 this.someData = 'new value'，DOM 并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情，就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。
<div class="hello">
<div>
<button id="firstBtn" @click="testClick()" ref="aa">{{testMsg}}</button>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
testMsg:"原始值",
}
},
methods:{
testClick:function(){
let that=this;
that.testMsg="修改后的值";
console.log(that.$refs.aa.innerText); //that.$refs.aa获取指定DOM，输出：原始值
}
}
}
</script>
此时打印必然是原始值因为vue修改dom之后不会立即更新
如果需要打印出赋值之后的testMsg需使用使用this.$nextTick()
methods:{
testClick:function(){
let that=this;
that.testMsg="修改后的值";
that.$nextTick(function(){
console.log(that.$refs.aa.innerText); //输出：修改后的值
});
}
}
通俗的理解：数据更改之后需要更新视图就可以使用这个方法啦
