关于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) 代替。