vue.nextTick()方法的使用详解

vue.nextTick()方法的使用详解

面试中this.$nextTick大概是会被经常问到的问题了吧，下面就在这里总结记录一下他的用法及理解。

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

所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；

理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，

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

使用this.$nextTick()

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

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