vue回车聚焦下一个input，动态绑定ref出现，refs拿到为undefined

解答思路

问题的关键在于区分清楚访问 $refs 时到底用的是「字面量属性名」还是「变量值作为属性名」，这三种写法在 JS 语法层面含义完全不同，只有正确地把变量作为动态键去访问，才能取到通过动态 ref 绑定注册的实例。

示例代码

this.$refs.label.focus();     // 访问名为字面量 "label" 的 ref
this.$refs[label].focus();    // 访问「变量 label 的值」所对应的 ref（正确的动态访问方式）
this.$refs['label'].focus();  // 等价于 this.$refs.label，同样是字面量 "label"

详细说明

这三种写法的本质区别：

• this.$refs.label 与 this.$refs['label'] 是完全等价的，二者访问的都是名字字面量为 "label" 的那个 ref，与作用域中是否存在一个叫 label 的变量无关。
• this.$refs[label]（注意没有引号）访问的是变量 label 当前的值所对应的属性名。如果动态绑定 ref 时用的是 :ref="someDynamicName"，那么真正注册到 $refs 上的键名是 someDynamicName 这个变量在运行时的实际取值，而不是字符串 "label"。

回到问题本身：如果 ref 是通过 :ref="item.id" 之类的表达式动态生成的，那么访问时也必须用同样的动态取值方式（如 this.$refs[item.id]），而不能用 this.$refs.label 或 this.$refs['label'] 这种访问字面量固定字符串 "label" 的写法——这正是「读取的并不是你真正想要的那个 ref」，从而拿到 undefined 的根本原因。

小结

$refs.xxx 和 $refs['xxx'] 访问的是字面量字符串 "xxx"，而 $refs[变量] 才是访问「变量的值」对应的动态键；动态绑定的 ref 必须用与绑定时一致的动态取值方式来访问，否则会因为键名不匹配而取到 undefined。