因为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 的回调函数中执行重新应用插件的方法。
原文链接：https://blog.csdn.net/weixin_45259626/article/details/105976122
