vue3中函数ref与正常ref的差异

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

根据官方文件

。。ref(普通ref(数组不能保证与源数组的顺序相同。

然而，有了函数ref，您就有了更大的灵活性：

。。。它将在每次组件更新时调用，并使您在存储元素参考的位置上具有充分的灵活性