共计 1031 个字符，预计需要花费 3 分钟才能阅读完成。
论断：Vue 中的 nextTick 波及到 Vue 中 DOM 的异步更新
一、示例：
<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>
Vue 实例
new Vue({
el: '.app',
data: {
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
}
}
})
点击前：
点击后：
从图中能够得悉：msg1 和 msg3 显示的内容还是变换之前的，而 msg2 显示的内容是变换之后的。其根本原因是因为 Vue 中 DOM 更新是异步的（具体解释在前面）。
二、利用场景：
- 在 Vue 生命周期的 created() 钩子函数进行的 DOM 操作肯定要放在 Vue.nextTick() 的回调函数中。
- 在数据变动后要执行的某个操作，而这个操作须要应用随数据扭转而扭转的 DOM 构造的时候，这个操作都应该放进 Vue.nextTick() 的回调函数中
Vue 的官网文档中具体解释:
Vue 异步执行 DOM 更新。只有察看到数据变动，Vue 将开启一个队列，并缓冲在同一事件循环中产生的所有数据扭转。如果同一个 watcher 被屡次触发，只会被推入到队列中一次。这种在缓冲时去除反复数据对于防止不必要的计算和 DOM 操作上十分重要。而后，在下一个的事件循环“tick”中，Vue 刷新队列并执行理论 (已去重的) 工作。Vue 在外部尝试对异步队列应用原生的 Promise.then 和 MessageChannel，如果执行环境不反对，会采纳 setTimeout(fn, 0) 代替。
正文完
