长v-for列表存DOM元素ref致性能问题，求高效Vue合规focus方案

我有一个使用v-for渲染的长列表，希望按下向下箭头时调用.focus()聚焦下一个元素。

尝试方案 #

<script setup>
import { ref } from 'vue'
const htmlElements = ref([])
const elements = Array.from({ length: 5_000 }, (_, i) => ({ text: 'Element'+ i }))
</script>

<template>
 <p v-for="el of elements" ref="htmlElements">{{ el.text }}</p>
</template>

我通过ref="htmlElements"存储v-for循环对应的DOM元素列表，用于调用focus方法（相关逻辑已省略）。

问题 #

使用ref="htmlElements"会导致严重的性能问题。通过父元素的原生childNodes属性访问DOM元素虽无性能问题，但存在不稳定性（例如需过滤#text节点）。

疑问 #

如何找到一种高效且符合Vue规范的方式，实现子节点的.focus()调用？

解决方案 #

核心思路：避免缓存全部DOM节点，仅维护聚焦索引 #

直接存储数千个DOM节点会占用大量内存并拖慢渲染，最优方案是只跟踪当前聚焦元素的索引，需要聚焦时再动态获取对应DOM节点。

具体实现 #

<script setup>
import { ref, onMounted } from 'vue'

// 生成长列表数据
const elements = Array.from({ length: 5_000 }, (_, i) => ({ text: `Element ${i}` }))
// 父容器ref，用于获取子元素
const listContainer = ref(null)
// 当前聚焦元素的索引
const currentFocusIndex = ref(0)

// 页面挂载后初始聚焦第一个元素并监听键盘事件
onMounted(() => {
  focusElement(currentFocusIndex.value)
  window.addEventListener('keydown', handleKeyDown)
})

// 处理键盘向下箭头事件
const handleKeyDown = (e) => {
  if (e.key === 'ArrowDown') {
    e.preventDefault()
    if (currentFocusIndex.value < elements.length - 1) {
      currentFocusIndex.value++
      focusElement(currentFocusIndex.value)
    }
  }
}

// 聚焦指定索引的元素
const focusElement = (index) => {
  const target = listContainer.value?.children[index]
  if (target) {
    target.focus()
  }
}
</script>

<template>
  <div ref="listContainer">
    <p 
      v-for="(el, index) of elements" 
      :key="index"
      tabindex="0"
    >
      {{ el.text }}
    </p>
  </div>
</template>

关键优化点 #

1. 添加tabindex="0"：让<p>这类默认不可聚焦的元素支持.focus()调用。
2. 父容器children访问：只要父容器内仅包含列表项（无额外文本节点或其他元素），children就能直接返回有序的列表项DOM节点，无需过滤，稳定性高。
3. 仅维护聚焦索引：避免一次性存储数千个DOM节点，大幅降低内存占用，提升性能。
4. 符合Vue规范：通过Vue的ref机制获取父容器，而非直接操作全局DOM，保持代码可维护性。

额外注意事项 #

如果列表存在动态更新（如过滤、排序），需要同步调整currentFocusIndex，避免索引指向错误元素。例如在列表数据更新后，将索引重置为0，或根据新数据调整到合理范围。

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