$nextTick()的理解

vue的$nextTick()
先看码

<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>
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
    }
  }
})

点击前：
点击后：

是不是很奇怪，为何只有msg2的数据发生变化，关键点，在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，可以调用mouted这个生命钩子函数，在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，所以这里相当于这里是在Mouted里调用这个生命钩子，只有当Dom节点真正渲染上，才能操作dom，所以Vue.nextTick(callback)这样回调函数在 DOM 更新完成后就会调用。