先解释下：
vue中的nextTick主要用于处理数据动态变化后，DOM还未及时更新的问题，用nextTick就可以获取数据更新后最新DOM的变化
<template>
<div class="next-click">
<ul ref="ulRef">
<li v-for="(item,index) in items" :key="index">
{{item}}
</li>
</ul>
<button @click="add"></button>
</div>
</template>
<script>
export default{
data(){
return {
items:['项目1','项目2','项目3']
}
},
methods:{
add(){
this.items.push(Math.random());
const elElem = this.$refs.ulRef;
const length = elElem.childNodes.length;
console.log('length',length)
}
}
}
</script>
这样点击增加按钮的时候，打印的数组长度，永远就是比真实的少，这是为什么呢？
那是因为没有渲染完成，就打印了！！！
那么，如何解决？$nextTick就是渲染之后执行的
<template>
<div class="next-click">
<ul ref="ulRef">
<li v-for="(item,index) in items" :key="index">
{{item}}
</li>
</ul>
<button @click="add"></button>
</div>
</template>
<script>
export default{
data(){
return {
items:['项目1','项目2','项目3']
}
},
methods:{
add(){
this.items.push(Math.random());
this.$nextTick(()=> {
const elElem = this.$refs.ulRef;
const length = elElem.childNodes.length;
console.log('length',length)
})
}
}
}
</script>
