vue.nextTick的用处

1.vue在更新DOM时是异步执行的，只要侦听到数据变化，vue将开启一个队列，
当你修改一个新值时，组件不会立即重新渲染，而是会在下一个事件循环中
所有同步任务都在主线程上执行，形成一个执行栈，等待任务回调结果进入一种任务队列，
当主执行栈中的同步任务执行完毕后才会读取任务队列

<div id="app">
    <button ref='aa' @click="edit()">{{testMsg}}</button>
</div>
<script>
export default {
  name: 'App',
  data(){
    return{
      testMsg:'原始值'
    }
  },
  methods:{  
    edit(){
      this.testMsg = '修改后值'
      console.log(this.$refs.aa.innerText);
    }
  }
}
</script>

点击后打印出来的是原始值

因为vue实现响应式不是数据发生变化之后DOM立即变化，而是按一定规律进行DOM的更新,$nextTick是在下次DOM更新循环结束之后执行回调，使用$nextTick则可以在回调中获取更新后的DOM

export default {
  name: 'App',
  data(){
    return{
      testMsg:'原始值'
    }
  },
  methods:{  
    edit(){
      this.testMsg = '修改后值'
      this.$nextTick(() => {
        console.log(this.$refs.aa.innerText);
      })
    }
  }
}

点击后打印出来的是修改后值