this.$nextTick与Vue.nextTick

**this.$nextTick()**官方介绍：将回调延迟到下次 DOM 更新循环之后执行。为了在数据变化之后等待 Vue 完成更新 DOM （可以在数据变化之后立即使用 ，得到的就是更新后的数据）。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
一个修改官方的例子讲的很明白：

<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>
  <button @click="changeMsg"> Change the Message</button>
</div>
</body>
<script>
  new Vue({
    el: '.app',
    data: {msg: 'Hello Vue.', msg1: '', msg2: ''},
    methods: {
      changeMsg () {
        this.msg = "Hello world.";
        this.msg1 = this.$refs.msgDiv.innerHTML;       //hello.vue 这里数据改变了，却没有渲染DOM
        this.$nextTick(() => {
          this.msg2 = this.$refs.msgDiv.innerHTML      //hello.world  正确的输出
        });
      }           //第一次点击是上面的输出，再次点击全部为hello.world
    }
  })
</script>