定义:在下次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,

Logo

前往低代码交流专区

更多推荐