$nextTick()（详细说明）

因为 Vue 并不是数据发生变化之后 DOM 立即变化，而是有一定延迟，因此会出现你拿到的值会出现延迟更新的，于是就出现了 $nextTick() 方法

举个例子：

<template>
  <div class="hello">
    <div>
      <button  @click="testClick()" ref="btn">{{testMsg}}</button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      testMsg:"原始值",
    }
  },
  methods: {
    testClick:function(){
      this.testMsg="修改后的值";
      console.log(this.$refs.btn.innerText);   //that.$refs.btn获取指定DOM，输出：原始值
    }

  }
}
</script>

解决办法：

<template>
  <div class="hello">
    <div>
      <button  @click="testClick()" ref="btn">{{testMsg}}</button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      testMsg:"原始值",
    }
  },
  methods: {
     testClick: function () {
       this.testMsg = "修改后的值";
       this.$nextTick(function () {
         console.log(this.$refs.btn.innerText);  //输出：修改后的值
       });
     }
  }
}
</script>

一定要把例子拿下面实现一遍，然后打开控制台对比一下就懂了