如何在 Nuxt 3 中动态遍历所有模板 ref（包括组件 ref）

Nuxt 3 废弃了 Vue 2 的 this.$refs，但可通过 getCurrentInstance().refs 在 onMounted 中安全访问所有已注册的模板 ref，实现类似 Vue 2 的批量操作逻辑。

Nuxt 3 废弃了 Vue 2 的 `this.$refs`，但可通过 `getCurrentInstance().refs` 在 `onMounted` 中安全访问所有已注册的模板 ref，实现类似 Vue 2 的批量操作逻辑。

到了 Nuxt 3（基于 Vue 3 Composition API）里，ref 的访问方式已经变了：它不再走 this，也不能像 Vue 2 那样，通过字符串动态拼出 this.$refs['inputValue' + i] 来取值。不过，Vue 3 内部依然维护着一个 refs 对象，可以借助 getCurrentInstance().refs 拿到——但这里一定要留意：这个 API 属于 Vue 的内部实例（ComponentInternalInstance），只有在组件已经挂载、并且当前实例有效的前提下才能使用，所以必须放在 onMounted 或其他生命周期钩子中调用。

✅ 正确用法：获取并遍历所有模板 ref

import { onMounted, getCurrentInstance } from 'vue'

onMounted(() => {
const instance = getCurrentInstance()
if (!instance) return

// 获取所有通过 ref="xxx" 绑定的 DOM 元素或组件实例
const refs = instance.refs

// 遍历所有 ref（key 为 ref 名，value 为绑定的元素/组件实例）
for (const [key, refValue] of Object.entries(refs)) {
// 过滤出以 'inputValue' 开头的 ref（按需匹配）
if (typeof key === 'string' && key.startsWith('inputValue')) {
// 假设每个 ref 指向一个具有 checkRequired() 方法的自定义组件
if (typeof (refValue as any)?.checkRequired === 'function') {
const result = (refValue as any).checkRequired()
if (!result?.result) {
error_message.push(result.message)
}
}
}
}
})

⚠️ 注意事项

• getCurrentInstance() 返回值可能为 null：仅在 setup 执行期间及组件挂载后有效，务必在 onMounted 中使用，并做空值校验；
• refs 是响应式对象，但其属性本身不响应式：它仅在模板中 ref="xxx" 绑定完成时一次性填充，不会随后续 ref 动态增删而更新；
• 避免在模板中重复使用相同 ref 名：Vue 会将同名 ref 自动转为数组（如多个 → refs.item 为 Array），需额外判断类型；
• 类型安全建议：getCurrentInstance().refs 类型为 Record，可配合 TypeScript 接口或类型断言增强可读性，例如：

  interface FormRefs {
  first_name_ref: InstanceType | null
  inputValue0: InstanceType | null
  // ……
  }
  const refs = instance.refs as FormRefs

✅ 更优雅的替代方案（推荐）

若 ref 数量固定且语义明确，建议改用 ref 数组 + v-for + ref 函数式绑定，兼顾可维护性与类型安全：

这种方式无需依赖内部 API，完全符合 Composition API 设计哲学，扩展性强，且天然支持 TypeScript 类型推导。

总之，getCurrentInstance().refs 是兼容旧逻辑的快捷入口，但长期项目建议转向函数式 ref 绑定 + 数组管理，更健壮、更易测试、更易维护。