nextTick的定义及理解
定义： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的js代码。
理解： 当数据更新了，在dom中渲染后，自动执行该函数。 先看一个例子：
<template>
<div id="app">
<ul ref="next">
<li v-for="(item,index) in items" :key="index">
{{ item }}
</li>
</ul>
<button @click="add">添加</button>
</div>
</template>
<script>
export default {
data(){
return {
items:['苹果','西瓜','桃子']
}
},
methods:{
add(){
this.items.push('🍓')
//获取儿子的元素
let children=this.$refs.next
let length=children.childNodes.length
console.log('length',length)
}
}
}
</script>
在vue中这个结果是3,原因是vue中的数据更新是异步的，在平时的业务当中，我们一般都是在dom更新完毕之后，需要做一些处理，这时候我们就需要使用this.$nextTick，这个回调函数作用是就是当我们数据异步更新完毕之后在去执行。
什么时候需要用的this.nextTick()
Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。
当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中；通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它。
总结: 在使用nextTick中的回调函数，在下一次DOM更新循环结束之后，执行回调。 用于获取更新后的DOM，主要原因是vue中数据更新是异步的。使用nextTick方法可以保证用户定义的逻辑在更新之后执行
