<p>我刚接触Vue并且正在尝试一些东西。我也在使用Ionic，对此也是新手。我有自己的组件&lt;trip.card&gt;，我希望将每个从API返回的行程实例显示出来。</p> <pre class="brush:php;toolbar:false;">&lt;template&gt; &lt;ion-page&gt; &lt;ion-content :fullscreen="true"&gt; &lt;ion-header collapse="condense"&gt; &lt;ion-toolbar&gt; &lt;ion-title size="large"&gt;Woadie - Trips&lt;/ion-title&gt; &lt;/ion-toolbar&gt; &lt;/ion-header&gt; &lt;trip-card v-for="trip in trips" ref="trips" :tripName="trip.name" /&gt; &lt;/ion-content&gt; &lt;/ion-page&gt; &lt;/template&gt;</pre> <p>根据我从文档中了解到的，我现在可以使用onMounted来设置我的数据。</p> <pre class="brush:php;toolbar:false;">&lt;script setup lang="ts"&gt; import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, } from "@ionic/vue"; import TripCard from "./TripCard.vue"; import axios from "axios"; import { ref, onMounted } from "vue"; const trips = ref([]); onMounted(() =&gt; { axios.get("http://localhost:8081/woadie/trips").then((response) =&gt; { trips.value = response.data; }); }); &lt;/script&gt;</pre> <p>现在，我的API返回一个包含一个行程实例的数组。然而，&lt;trip-card&gt;组件的显示次数远远超过一次。这可能是什么原因呢？</p><p>在文档中，我找到了以下代码片段。</p><p><br /></p> <pre class="brush:php;toolbar:false;">&lt;script setup&gt; import { ref, onMounted } from 'vue' const list = ref([ /* ... */ ]) const itemRefs = ref([]) onMounted(() =&gt; console.log(itemRefs.value)) &lt;/script&gt; &lt;template&gt; &lt;ul&gt; &lt;li v-for="item in list" ref="itemRefs"&gt; {{ item }} &lt;/li&gt; &lt;/ul&gt; &lt;/template&gt;</pre> <p>我的实现与文档中的不同之处似乎在于const list = ref([])和&lt;li v-for="item in list" ref="itemRefs"&gt;，而不是直接使用itemRefs。为什么会有这个额外的步骤？这个额外的步骤是做什么的？文档中没有解释，我不明白为什么需要这样做。</p>