Vue中$nextTick()用法

在下次 DOM 数据更新循环结束之后执行延迟回调。也就是说此回调函数是延迟执行的，是在下一次DOM数据更新后自动执行。
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。主要用在两方面，一种是在vue的created函数中操作DOM数据时使用，另一种是修改DOM数据后获取最新的DOM数据。

1.在vue的created函数中操作DOM数据时使用

<template>
  <div>
    <span ref="span">你好</span>
  </div>
</template>

<script>
export default {
  name: "Hello",
  created() {
    //在DOM再次更新后执行此回调函数
    this.$nextTick(() => {
      this.$refs.span.innerHTML = "今天加班";
    });
  },
};
</script>

<style>
</style>

2.修改DOM数据后获取最新的DOM数据

<template>
  <div>
    <button id="firstBtn" @click="testClick()" ref="aa">{{msg}}</button>
  </div>
</template>

<script>
export default {
  name: "Hello",
  data() {
    return {
      msg: "old"
    };
  },
 
  methods: {
    testClick() {
      //点击按钮修改数据
      this.msg = "new";
      console.log(this.$refs.aa.innerText); //输出：old
      //此时数据并没有更新,原因是DOM没有更新

      //此时数据更新了，原因是在输出的时候DOM已经更新了
      this.$nextTick(() => {
        console.log(this.$refs.aa.innerText); //输出：new
      });
    }
  }
};
</script>

<style>
</style>

就是这么简单，在日常的代码中使用挺多的。