Vue里的nextTick方法

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

官方解释：

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

自己总结：

`Vue.nextTick(callback)`，当数据发生变化，更新后执行回调。
`Vue.$nextTick(callback)`，当dom发生变化，更新后执行的回调。

实例：

<template>
<div>
<div class="app">
<div ref="msgDiv">{{msg}}</div>
<div v-if="msg1">Message got outside $nextTick: {{msg1}}</div>
<div v-if="msg2">Message got inside $nextTick: {{msg2}}</div>
<div v-if="msg3">Message got outside $nextTick: {{msg3}}</div>
<button @click="changeMsg">
Change the Message
</button>
</div>
</div>
</template><script>
export default {
data() {
return {
msg: "Hello Vue.",
msg1: "",
msg2: "",
msg3: ""
};
},
methods: {
changeMsg() {
this.msg = "Hello world.";
this.msg1 = this.$refs.msgDiv.innerHTML;
this.$nextTick(() => {
this.msg2 = this.$refs.msgDiv.innerHTML;
});
this.msg3 = this.$refs.msgDiv.innerHTML;
}
}
};
</script>