vue3不用v-for获取多个同名ref dom元素

在 Vue3 中，可以使用 `ref` 的新特性来获取多个同名的 DOM 元素。具体做法是：在 `ref` 中使用一个函数，并将函数的参数设置为一个数组，然后在函数中使用 `map` 方法将每个元素的 `ref` 存储到一个数组中。

例如，如果要获取多个同名的 `input` 元素，可以这样做：

<template>
  <div>
    <input v-for="(item, index) in items" :key="index" :ref="setInputRefs" />
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const inputRefs = ref([]);

    const setInputRefs = (el) => {
      if (el) {
        inputRefs.value.push(el);
      }
    };

    // 现在你可以在 inputRefs 中访问所有的 input 元素的 ref 了
    console.log(inputRefs.value);

    return {
      setInputRefs,
      inputRefs,
      items: [1, 2, 3],
    };
  },
};
</script>

这里我们定义了一个 `inputRefs` 的 `ref`，并在 `setInputRefs` 函数中将每个 `input` 元素的 `ref` 存储到 `inputRefs` 中。最后，我们就可以在 `inputRefs` 中访问所有的 `input` 元素的 `ref` 了。