Bagaimanakah rujukan templat berfungsi dalam pemalar?

Question

Mengenai masalah rujukan template dalam vue

Saya sedang melihat dokumentasi vue pada "refs" dan di bahagian yang menerangkan rujukan dalam v-for ia memberikan contoh berikut:

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

Saya boleh faham tujuannya

const itemRefs = ref([])

Tetapi saya tidak faham kenapa ref juga digunakan untuk

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

Dalam kotak pasir adalah mungkin untuk mengalih keluar rujukan daripada "pemalar senarai" tanpa merosakkan fungsi, jadi apakah aplikasi sebenar di dalam pemalar ini?

<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

Gunakan ref untuk menukar list kepada pembolehubah reaktif. Setiap kali item baharu ditambah atau ditukar, fungsi atau bahagian templat lain yang memantaunya akan dikemas kini. Dalam contoh tanpa ref , apabila anda menambahkan item baharu pada senarai, ia tidak dipaparkan secara automatik dalam templat.

Saya dapat memahami kekeliruan anda, saya rasa anda mungkin dari dunia vue2. Saya sangat mengesyorkan membaca dokumentasi vue3 tentang kereaktifan.