Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。Vue.$nextTick(callback)，当dom发生变化更新后执行的回调。
Vue.$nextTick() 方法是在下次DOM更新 循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。
在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。因为在created()钩子函数执行的时候DOM其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题。
在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。
<template>
<div class="nextTick">
<div ref="msgDiv">{{msg}}</div>
<button @click="changeMsg">
Change the Message
</button>
</div>
</template>
<script type="text/ecmascript-6">
export default {
name: "nextTick",
data() {
return {
msg: "Hello Vue."
};
},
methods: {
changeMsg() {
this.msg = "Hello World.";
setTimeout(() => {
console.log(this.$refs.msgDiv.innerHTML); // Hello World.
}, 0);
this.$nextTick(() => {
console.log(this.$refs.msgDiv.innerHTML); // Hello World.
});
console.log(this.$refs.msgDiv.innerHTML); // Hello Vue.(没有改变)
}
}
};
</script>
点击按钮之后，发现控制台中this.$nextTick()和setTimeout()都发生了改变
可以发现this.$nextTick和setTimeout的效果是一样的，都是将回调方法放入异步队列中
this.$nextTick是当dom发生变化更新后执行的回调。setTimeout只是一个异步延迟执行
