在Vue中，$refs是一個很常見的用來訪問組件內部元素或子組件的API。但是有時候我們在使用$refs時卻會遇到undefined的情況。

這通常是因為當$refs被調用時，被引用的組件在組件掛載之前被調用了。這時$refs可能還沒有被賦值，所以調用時會返回undefined。

<template>
<div>
<child ref="mychild"></child>
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$refs.mychild) // undefined
},
components: {
child
}
}
</script>

上述代碼中，當組件掛載時控制臺會輸出undefined。這時我們可以使用Vue.nextTick()函數等待DOM更新，然后再訪問$refs。因為nextTick()會在DOM更新后再執行特定操作，確保了元素已經被掛載，$refs也已經被賦值了。

<template>
<div>
<child ref="mychild"></child>
</div>
</template>
<script>
export default {
mounted() {
this.$nextTick(() => {
console.log(this.$refs.mychild) // child組件實例
})
},
components: {
child
}
}
</script>

通過在nextTick()中訪問$refs，我們可以確保我們訪問的元素已經被掛載，避免了$refs為undefined的情況。