Vue里的nextTick方法

官方解释：

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

自己总结：

`Vue.nextTick(callback)`，当数据发生变化，更新后执行回调。
`Vue.$nextTick(callback)`，当dom发生变化，更新后执行的回调。

实例：

<template>
    <div>
        <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>
    </div>
</template>

<script>
export default {
  data() {
    return {
      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;
    }
  }
};
</script>

　　

 

参考博客：

https://blog.csdn.net/sinat_17775997/article/details/71638144（理解 $nextTick 的作用）