vue中的this.nextTick()

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

所以就出了这个获取更新后的DOM的vue方法，因此放在this.$nextTick()回调函数中的执行的是会对Dom进行操作的js代码。

理解：vue在解析dom的时候并不是执行一条语句就解析一次dom，想象这样一个案例，一个输入框，我想要在点击按钮的时候可编辑这个输入框的内容，并且获取到该输入框的焦点，如果按照我们正常的思路来写，应该是在执行完可编辑之后加一条获取焦点的语句，运行的会发现并没有获取到焦点，这是因为，在执行获取焦点这个事件的时候，vue还没开始解析DOM，当解析dom的时候，获取焦点语句已经执行过了，这就不能实现想要的效果了，这个时候就需要用到this.$nextTick(),vue在遇到这条语句时，会先不执行他，而是在解析更新dom后开始执行，这个操作是异步的，这就能实现想要的效果了。

当然也有其他的解决办法，就让他异步操作就好，比如写个定时器也是可以完成的，即使定时器不给等待执行的时间也可以完美完成，当然更官方的话就写this.$nextTick()。

下面是一个案例

<template>
  <div class="hello">
    <div>
      <button id="firstBtn" @click="testClick()" ref="aa">{{testMsg}}</button>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      testMsg:"原始值",
    }
  },
  methods:{
    testClick:function(){
      let that=this;
      that.testMsg="修改后的值";
      console.log(that.$refs.aa.innerText);   //that.$refs.aa获取指定DOM，输出：原始值
    }
  }
}
</script>
 

使用this.$nextTick()

methods:{
    testClick:function(){
      let that=this;
      that.testMsg="修改后的值";
      that.$nextTick(function(){
        console.log(that.$refs.aa.innerText);  //输出：修改后的值
      });
    }
  }

注意：Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM，