Vue3动态refs获取值为undefined的问题排查

错误点1：动态ref的写法错误 #

你把ref的回调函数用模板字符串包裹了，这会让Vue把它当成普通字符串处理，而非执行回调函数，导致messageRef里根本没存入DOM元素。

错误点2：ref对象的访问方式错误 #

messageRef是ref包裹的对象，要访问内部属性得先取.value，再访问对应索引，而非messageRef[1].value。

修复后的代码 #

模板部分：

<div v-for="index in 2" :key="index">
    <q-btn @click="test()">teste</q-btn>
    <textarea :ref="(el) => (messageRef.value[index] = el)"></textarea>   
</div>

script部分：

const messageRef = ref({});

function test(){
    const ref1 = messageRef.value[1]
    console.log(ref1)
    const ref2 = messageRef.value[2]
    console.log(ref2)
}
return {test, messageRef}

额外说明 #

动态ref的回调函数会在组件挂载/更新时执行，销毁时会传入null，如果需要清理无效引用，可以在回调里处理：

:ref="(el) => {
  if (el) {
    messageRef.value[index] = el
  } else {
    delete messageRef.value[index]
  }
}"

内容的提问来源于stack exchange，提问作者Luiz Alves