vue 之 $nextTick

一、什么是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";  
    });
}

2. 等待新的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已经渲染完毕
      });
   }
}

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