一、什么是Vue.$nextTick()

官方给的解释为:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
我的理解为:nextTick()是将回调函数延迟在dom更新数据后调用,就是当数据更新后且dom渲染后,再自动执行该函数。

二、使用场景
  1. created()中进行dom操作。
    由于在created()中,dom节点还没有渲染,如果需要在这里面进行dom操作,就需要使用nextTick(),将dom操作写在nextTick()回调函数中。如:
created(){
    let self=this;
    self.$nextTick(function(){
        self.$refs.test.innerHTML="update message";  
    });
}
  1. 等待新的dom元素渲染完毕后执行的操作。
    在有些情况中,我们需要在dom节点因数据改变而重新渲染完成后去执行一些操作。如:
methods:{
  changeTxt:function(){
      let self=this;
      self.msg="修改的文本值";  //修改数据
      let dom=document.getElementById('msg').innerText;
      console.log(dom.innerText); //此时DOM并没有渲染完毕
      self.$nextTick(function(){ 
        console.log(dom.innerText);  //输出可以看到DOM已经渲染完毕
      });
   }
}

努力爱一个人。付出,不一定会有收获;不付出,却一定不会有收获,不要奢望出现奇迹。

Logo

前往低代码交流专区

更多推荐