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

在 Vue3 中，可以使用 `ref` 的新特性来获取多个同名的 DOM 元素，而不需要使用 `v-for`。

具体做法是：在 `setup()` 函数中使用 `ref` 创建一个空数组，并使用 `ref` 创建一个函数，将其作为 `ref` 的参数传入，然后在函数中使用 `querySelectorAll` 方法获取到所有同名的 DOM 元素，并使用 `Array.from()` 将其转换为数组，最后将数组存储到之前创建的空数组中。

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

<template>
  <div>
    <input class="my-input" />
    <input class="my-input" />
    <input class="my-input" />
  </div>
</template>

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

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

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

    onMounted(() => {
      const elements = document.querySelectorAll('.my-input');
      inputRefs.value = Array.from(elements);
    })

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

    return {
      setInputRefs,
      inputRefs,
    };
  },
};
</script>

这里我们在 `setup()` 函数中使用 `querySelectorAll` 获取到所有同名的 `input` 元素，并使用 `Array.from()` 将其转换为数组，然后将其存储到 `inputRefs` 中。最后，我们就可以在 `inputRefs` 中访问所有的 `input` 元素的 `ref` 了。