关于vue.js:理解vue中的nextTick

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