Vue3 动态 ref 如何在循环中正确绑定并获取 DOM 元素？

Question

在Vue3项目开发中，如何在循环渲染的列表中正确使用动态ref绑定并获取每个DOM元素？当我们使用v-for生成一组元素时，如果直接用固定的ref名称，会导致覆盖或无法准确获取目标DOM。正确做法是结合元素索引或唯一标识符动态设置ref值，例如`ref="item_${index}"`或`ref={el => this.$refs[`item_${index}`] = el}`。然后通过`this.$refs`访问具体DOM。注意需确保操作发生在组件下一次DOM更新后，如利用`nextTick()`方法。此技巧适用于需要对多个子元素进行精确控制的场景，比如焦点管理、尺寸测量等。