vue动态绑定ref但是this.$refs[refName]返回值是undefined

在 Vue 中，使用 `ref` 可以获取到组件或元素的引用，但是需要注意以下几点：

1. `ref` 只能用在组件和元素上，不能用在普通的 JavaScript 对象上。

2. 组件的 `ref` 是一个字符串，元素的 `ref` 可以是字符串或者函数。

3. 使用 `ref` 获取组件或元素的引用，需要在组件或元素渲染完成后才能获取到。

如果你在 Vue 组件中动态绑定了 `ref`，但是在 `mounted` 钩子函数中获取 `this.$refs[refName]` 的值为 `undefined`，可能是因为获取的时机不正确。

你可以在 `updated` 钩子函数中获取到更新后的 `this.$refs[refName]` 的值，或者使用 `$nextTick` 方法在 DOM 更新后再去获取。例如：

<template>
  <div ref="myDiv">{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  mounted() {
    // 在 mounted 钩子函数中获取 this.$refs.myDiv 的值为 undefined
    // console.log(this.$refs.myDiv)

    // 在 updated 钩子函数中获取 this.$refs.myDiv 的值是正确的
    // console.log(this.$refs.myDiv)
  },
  updated() {
    console.log(this.$refs.myDiv) // 输出 div 元素的引用
  },
  methods: {
    async changeMessage() {
      this.message = 'Hello, Vue!'
      await this.$nextTick()
      console.log(this.$refs.myDiv) // 输出 div 元素的引用
    }
  }
}
</script>

如果你在组件中使用了 `v-if` 或者 `v-for` 等指令，需要等到 DOM 更新完成后再去获取引用，否则也会出现获取不到的情况。