论断：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)代替。