Vue3 script setup中v-for的refs在onMounted时为空问题排查

问题出在异步数据的加载时机上：

• usedTables是从store获取的响应式数据，大概率是异步加载（比如接口请求）。onMounted触发时，组件本身已挂载，但usedTables还未返回数据，导致v-for没有渲染任何<tr>元素，itemRefs自然为空数组。
• 热重载时，store已缓存usedTables的数据，组件挂载时v-for直接渲染元素，所以itemRefs能正常获取内容。

解决步骤 #

1. 通过响应式监听等待数据就绪
   用watch监听usedTables的变化，等数据加载完成后再处理DOM相关逻辑：

   import { watch } from 'vue'
   
   watch(usedTables, (newTables) => {
     if (newTables.length) {
       // 此时usedTables已有数据，itemRefs已填充对应DOM元素
       const urlPath = window.location.pathname.slice(1).split('/')
       if (urlPath[0] === 'tables' && Number.isInteger(+urlPath[1])) {
         // 优先用itemRefs查找元素，更符合Vue响应式逻辑
         const currentTable = itemRefs.value.find(el => el.id === `table-${urlPath[1]}`)
         console.log(currentTable)
       }
     }
   }, { immediate: true }) // immediate: true 会在组件挂载时立即执行一次回调
   

2. 用Vue ref替代手动DOM查询
   模板中给按钮绑定ref：

   <button ref="mineButton" id="mine-tables">我的桌台</button>
   

   script中直接使用ref引用，无需document.getElementById：

   const mineButton = ref(null)
   
   // 需要操作按钮时，使用mineButton.value即可
   

3. 确认v-for绑定ref的正确性
   你当前ref="itemRefs"的写法是正确的，Vue3会自动将每个<tr>元素推入itemRefs.value数组，但只有当usedTables有数据时才会填充。

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