关于uni-app使用v-for绑定动态ref后无法获取的解决办法

问题代码

<view class="list" v-for="item in data" :key="item.ref">
	<myCom class="item" :ref="item.ref">{{item.ref}}</myCom>
</view>

import myCom from 'xxx.vue';
export default {
	data(){
		return {
			data: []
		}
	},
	onReady(){
		for(let i = 0; i < 3; i++){
			this.data.push({ref: 'ref' + i});
		}
		console.log(this.$refs);
	},
	components: {
		myCom
	}
}

上述代码的打印结果为一个空对象，即表示并没有获取到动态的ref元素，但如果我们将动态的ref改成静态写死的ref，又能够获取得到，所以我们可以排除是兼容性的问题，而考虑是界面元素渲染的时间问题，我们可以加上一个延迟获取

<view class="list" v-for="item in data" :key="item.ref">
	<myCom class="item" :ref="item.ref">{{item.ref}}</myCom>
</view>

import myCom from 'xxx.vue';
export default {
	data(){
		return {
			data: []
		}
	},
	onReady(){
		for(let i = 0; i < 3; i++){
			this.data.push({ref: 'ref' + i});
		}
		setTimeout(() => {
			console.log(this.$refs);
		}, 1000);
	},
	components: {
		myCom
	}
}

此时我们能够正确获取到所有的ref元素，得出结论就是，元素渲染需要时间，我们必须得等它渲染完成后才能进行获取ref，否则将获取不到，至于延迟多少，看自己的业务情况，这里只是给出问题所在及对应的解决方法。