vue 3中函数参考文献与正规参考文献的差异

Question

今天，我学习了如何使用ref & v-for函数，下面的例子，但我发现这是很难理解的。所以我尝试了一种更简单的方法来做同样的事情，但是结果是不一样的。有人能解决我的好奇心吗？

示例：

    <template>
      <ul>
        <li
          v-for="(name, i) in names"
          :key="name"
          :ref="(el) => (elements[i] = el)"
        >
          {{ name }}
        </li>
      </ul>
        <!-- my idea -->
      <ul>
        <li
          v-for="(name) in names"
          :key="name"
          ref="newElements"
        >
          {{ name }}
       </li>
     </ul>
    </template>
    
    <script>
    import { ref, onMounted } from 'vue'
    export default {
      setup() {
        const names = ref(['Matt', 'John', 'Jane'])
        const elements = ref([])
        const newElements = ref('')
        const checkSame = function(){
          elements.value === newElements.value
          ? console.log("true")
          : console.log("false");
        }
        onMounted(() => {
          console.log(elements.value) // [li, li ,li]
          console.log(newElements.value) // [li, li ,li]
          checkSame()  // false
        })
        return {
          names,
          elements,
          newElements,
          checkSame 
        }
      },
    }
    </script>

Answer 1

根据官方文件

..the ref (normal )数组不能保证与源数组相同的顺序。

然而，对于函数参考，您有更多的灵活性：

将对每个组件更新调用...which，并使您在存储元素引用的位置上具有充分的灵活性。