Wie funktionieren Vorlagenreferenzen innerhalb von Konstanten?

Question

Über das Problem der Vorlagenreferenz in Vue

Ich habe mir die Vue-Dokumentation zu „Refs“ angesehen und in dem Abschnitt, in dem Refs in v-for erklärt werden, gibt es das folgende Beispiel:

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

Ich kann seinen Zweck verstehen

const itemRefs = ref([])

Aber ich verstehe nicht, warum ref auch auf

angewendet wird

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

In der Sandbox ist es möglich, die Referenz aus einer „Listenkonstante“ zu entfernen, ohne die Funktion zu beschädigen. Was ist also die eigentliche Anwendung innerhalb dieser Konstante?

<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 文档。