博客

Vue渲染是一个异步的渲染，在做添加任务(如下)的时候，Vue不会马上去做渲染，而是在下一个tick的时候做渲染，这个时候要是尝试获取一些dom元素属性的时候，还是获取的数据改变之前的数值，这样子就会出现慢一拍的情况。为了能准确获取到数据改变之后的情况，这时就可以使用Vue中提供的一个api—-$nextTick。

主要思路就是采用微任务优先的方式调用nextTick包装的方法。

this.$nextTick中的箭头函数(回调函数)，他会在dom异步渲染完毕的时候执行这个箭头函数，如果将之后的操作放在这个箭头函数中就可以解决问题

如下所示，如果不使用nextick，直接进行添加后获取的length，总是上一次的length长度！

<template>
<div>
	<ul ref="ulRef">
		<li v-for=“(it, i) in item” :key="i">
			{{ it }}
		</li>
	</ul>
	<button @click="add"></button>
</div>
</template>
<script>
export default {
	data()[
		return{
			item:['item1', 'item2', 'item3']
		}
	},
	methods:{
		add(){
			this.item.push(Math.random())
			// 获取子元素个数			
			this.$nextTick(()=>{
				const ulElem = this.$refs.ulRef
				const length = ulElem.childNodes.length
				console.log('length', length)
			})
		}
	}
}
</script>