一、总述
定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，回调函数获取更新后的dom再渲染出来；$nextTick 类似于一个非常高级的定时器，自动追踪DOM更新，更新好了就触发
语法： this.$nextTick( 回调函数 ) ，例如：
// 修改按钮操作
updateCateBtnFn(obj) {
this.isEdit = true
this.editId = obj.id
this.dialogVisible = true
// $nextTick()回调推迟到下一个 DOM 更新周期之后执行
this.$nextTick(() => {
this.addForm.cate_name = obj.cate_name
this.addForm.cate_alias = obj.cate_alias
})
}二、JS的执行机制
JS是单线程语言，即指某一时间内只能干一件事，为什么 JS 不能是多线程呢？多线程就能同一时间内干多件事情了
是否多线程这个取决于语言的用途，一个很简单的例子，如果同一时间，一个添加了DOM，一个删除了DOM，这个时候语言就不知道是该添还是该删了，所以从应用JS只能是单线程
单线程就意味着我们所有的任务都需要排队，后面的任务必须等待前面的任务完成才能执行，如果前面的任务耗时很长，一些从用户角度上不需要等待的任务就会一直等待，这个从体验角度上来讲是不可接受的，所以JS中就出现了异步的概念。
了解了JS的执行机制后，再了解vue中的$nextTick
三、案例
<template>
<div>
<button @click="testClick()" ref="a">{{msg}}</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg:"原始值",
}
},
methods:{
testClick(){
this.msg="修改值";
console.log(this.$refs.a.innerText); //this.$refs.a获取指定DOM，输出：原始值
}
}
}
</script>以上的案例输出的是 “原始值”，并未按照顺序输出 “修改值”，当我们使用this.$nextTick方法后
methods:{
testClick(){
this.msg="修改值";
this.$nextTick(() => {
console.log(this.$refs.a.innerText); //输出：修改值
});
}
}注意：Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。nextTick，则可以在回调中获取更新后的 DOM
四、什么时候需要this.nextTick()
data改变，更新DOM是异步的；DOM更新是异步的 ，Vue 响应式的特征，修改数据后，页面会自动更新，而更新DOM这个操作是异步的 ；这个时候使用 this.$nextTick( 回调函数 ) ，回调函数会在下一次 DOM更新完毕后执行
五、总结
vue在修改数据后 视图(DOM)不会立刻更新，而是等同一事件循环中的所有数据变化完成之后 再统一进行视图更新 所以 在修改数据更新立马读取DOM是获取不到新数据的 ， 获取到的原来的DOM函数
使用newxtTick 可以获得DOM更新后的数据 在下次DOM更新之后vue会回调nextTick指定的函数 可以在修改数据之后立即使用这个nextTick方法 在指定的函数里获取更新后的DOM
学习更多vue知识请关注CRMEB