模板引用如何在常數內工作？

Question

關於vue中模板引用的問題

我正在查看有關“refs”的 vue 文檔，並在它解釋 v-for 內的 ref 的部分中給出了以下示例：

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

我能理解它的用途

const itemRefs = ref([])

但我不懂為什麼 ref 也套用到

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

在沙箱中，可以在不損害函數的情況下從「列表常數」中刪除引用，那麼這個常數內的真正應用程式是什麼？

<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

使用 ref 將 list 轉換為反應變數。每當新增項目或以其他方式變更它時，監視它的其他函數或範本部分都會更新。在沒有 ref 的範例中，當您將新項目追加到清單中時，它不會自動以範本呈現。

我能理解你的困惑，我猜你可能來自 vue2 世界。我強烈建議您閱讀有關反應性的 vue3 文件。