Comment les références de modèles fonctionnent-elles dans les constantes ?

Question

À 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>

Answer 1

Utilisez ref pour convertir list en une variable réactive. Chaque fois qu'un nouvel élément est ajouté ou modifié, d'autres fonctions ou parties de modèle qui le surveillent seront mises à jour. Dans l'exemple sans ref , lorsque vous ajoutez un nouvel élément à la liste, il n'est pas automatiquement rendu dans le modèle.

Je peux comprendre votre confusion, je suppose que vous venez peut-être du monde vue2. Je recommande fortement de lire la documentation vue3 sur la réactivité.