Vue中的$.nextTick的理解

因为Vue的异步更新队列，$nextTick是用来知道什么时候DOM更新完成的。

常用的场景是在进行获取数据后，需要对新视图进行下一步操作或者其他操作时，发现获取不到dom。

因为赋值操作只完成了数据模型的改变并没有完成视图更新。

一、什么是Vue.nextTick()?

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

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

二、什么时候需要用的 Vue.nextTick()？？

1、在created钩子函数中进行的DOM操作，一定要放在Vue.nextTick()的回调函数中，原因是在函数执行的时候DOM其实并未挂载，所以此处一定要将DOM操作的js代码放在Vue.nextTick()的回调函数中，与之对应的就mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。

created(){
    let that=this;
    that.$nextTick(function(){  //不使用this.$nextTick()方法会报错
        that.$refs.aa.innerHTML="created中更改了按钮内容";  //写入到DOM元素
    });
}

2、当项目中你想在改变 DOM 元素的数据后基于新的 dom 做点什么，对新 DOM 一系列的 js 操作都需要放进 Vue.nextTick()的回调函数中；

通俗的理解是：更改数据后当你想立即使用 js 操作新的视图的时候需要使用它

正确的用法是：vue 改变 dom 元素结构后使用 vue.$nextTick()方法来实现 dom 数据更新后延迟执行后续代码

changeTxt:function(){
      let that=this;
      that.testMsg="修改后的文本值";  //修改dom结构
      that.$nextTick(function(){  //使用vue.$nextTick()方法可以dom数据更新后延迟执行
        let domTxt=document.getElementById('h').innerText;
        console.log(domTxt);  //输出可以看到vue数据修改后DOM立即更新了，
        if(domTxt==="原始值"){
          console.log("文本data被修改后dom内容没立即更新");
        }else {
          console.log("文本data被修改后dom内容被马上更新了");
        }
      });
    }

3、在使用某个第三方插件时 ，希望在 vue 生成的某些 dom 动态发生变化时重新应用该插件，也会用到该方法，这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法。