Comment les références de modèles fonctionnent-elles dans les constantes ?
À propos du problème de référence de modèle dans vue
Je regardais la documentation de vue sur "refs" et dans la section où elle explique les références à l'intérieur de v-car elle donne l'exemple suivant :
<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>
Je peux comprendre son objectif
const itemRefs = ref([])
Mais je ne comprends pas pourquoi ref s'applique également à
const list = ref([ /* ... */ ])
Dans le bac à sable, il est possible de supprimer la référence d'une "constante de liste" sans nuire à la fonction, alors quelle est la véritable application à l'intérieur de cette constante ?
<script setup>
import { ref, onMounted } from 'vue'
// const with ref
const list = ref([1, 2, 3])
const itemRefs = ref([])
onMounted(() => {
alert(itemRefs.value.map(i => i.textContent))
})
</script>
<template>
<ul>
<li v-for="item in list" ref="itemRefs">
{{ item }}
</li>
</ul>
</template>
<script setup>
import { ref, onMounted } from 'vue'
// const without ref
const list = ([1, 2, 3])
const itemRefs = ref([])
onMounted(() => {
alert(itemRefs.value.map(i => i.textContent))
})
</script>
<template>
<ul>
<li v-for="item in list" ref="itemRefs">
{{ item }}
</li>
</ul>
</template>