我的组件数量取决于数组数量，所以当我向数组添加新项时，它应该创建新组件.
当创建新组件时，我想获得它的参考，这就是我产生误解的地方.当我试图得到它时，最后添加的组件是undefined.
但是，如果我试图在一段时间后获得参考，它会起作用.我想这是因为异步，但我不确定.
为什么会发生这种情况，是否有办法避免使用setTimeout？
<div id="app">
<button @click="addNewComp">add new component</button>
<new-comp
v-for="compId in arr"
:ref="`components`"
:index="compId"
></new-comp>
</div>
<script type="text/x-template " id="compTemplate">
<h1> I am a component {{index}}</h1>
</script>
Vue.component("newComp",{
template:"#compTemplate",
props:['index']
})
new Vue({
el:"#app",
data:{
arr:[1,2,3,4]
},
methods:{
addNewComp:function(){
let arr = this.arr;
let components = this.$refs.components;
arr.push(arr.length+1);
console.log("sync",components.length);
console.log("sync",components[components.length-1])
setTimeout(() => {
console.log("async",components.length);
console.log("async",components[components.length-1])
}, 1);
}
}
})