vue3中使用v-for遍历组件时，获取对应组件不正确。

问题描述:

使用v-for遍历组件时，获取对应组件不正确

官网描述如下：

当在 v-for 中使用模板引用时，对应的 ref 中包含的值是一个数组，它将在元素被挂载后包含对应整个列表的所有元素：

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

const list = ref([
  /* ... */
])

const itemRefs = ref([])

onMounted(() => console.log(itemRefs.value))
</script>

<template>
  <ul>
    <li v-for="item in list" ref="itemRefs">
      {{ item }}
    </li>
  </ul>
</template>

应该注意的是，ref 数组并不保证与源数组相同的顺序。

---

解决方案：

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

  const list = ref([
    /* ... */
  ])

  const itemRefs = []
  function setItemRefs(el, index){
    if (el) {
      itemRefs[index] = el
    }
  }

  onMounted(() => {})
 </script>

<template>
  <ul>
    <li v-for="(item, index) in list" :ref="el => setItemRefs(el, index)">
      {{ item }}
    </li>
  </ul>
</template>

这样获取的itemRefs实例数组的顺序即和源数组的顺序相同，可根据索引获取对应的实例。