v-for ஒரு வரிசை (அல்லது பொருள்/வரம்பு) வழியாக மீண்டு பட்டியல் தোற்றங்களை பதிவு செய்கிறது. நீங்கள் எப்போதும் அதை ஒரு தனித்துவ :key உடன் இணைக்க வேண்டும், இதனால் Vue பொருட்களை திறம்பட கண்காணிக்க முடியும்.
<script setup>
import { ref } from "vue";
const items = ref([{ id: 1, name: "Apple" }, { id: 2, name: "Banana" }]);
</script>
<template>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</template>
<template>
<li v-for="(item, index) in items" :key="item.id">{{ index }}: {{ item.name }}</li>
<li v-for="(value, key) in myObject" :key="key">{{ key }}: {{ value }}</li>
<span v-for="n in 5" :key="n">{{ n }}</span> <!-- range 1..5 -->
</template>
Vue key ஐ பயன்படுத்தி எந்த பொருட்கள் மாற்றப்பட்டன, சேர்க்கப்பட்டன, அல்லது நீக்கப்பட்டன என்பதை அடையாளம் காண, இதனால் சுற்றிக் கொள்ள மற்றும் தற்போதுள்ள DOM முனைகளை மீண்டும் ஏற்பாடு செய்ய முடியும் அவற்றை மீண்டும் உருவாக்குவதற்குப் பதிலாக. ஒரு நிலையான முக்கிய இல்லாமல், Vue "in-place patch" கொள்கையில் திரும்புகிறது, இது பிழைகளை ஏற்படுத்தக்கூடும்:
<!-- ❌ using index as key → wrong when the list reorders/filters -->
<li v-for="(item, i) in items" :key="i">
<input /> <!-- input state can attach to the WRONG item after reordering -->
</li>
<!-- ✅ stable unique id → Vue tracks each item correctly -->
<li v-for="item in items" :key="item.id">...</li>
வரிசை குறியீட்டை key ஆக பயன்படுத்துவது பொதுவான பிழை — பொருட்கள் மீண்டும் ஏற்பாடு செய்யப்பட்டாலும், நுழைக்கப்பட்டாலும், அல்லது நீக்கப்பட்டாலும், உপাদান/DOM நிலை (உள்ளீட்டு மதிப்புகள் அல்லது சரிபார்ப்பு நிலைகள் போன்றவை) தவறான வரிசையில் இருக்கலாம்.
<!-- ❌ avoid — ambiguous precedence -->
<li v-for="x in items" v-if="x.active">...</li>
<!-- ✅ filter in a computed, or wrap with <template v-for> -->
v-for என்பது ஆற்றல்மிக்க பட்டியல்களை பதிவு செய்யும் வழி.
:key நடைமுறையில் விருப்பத் தேர்வல்ல: ஒரு நிலையான, தனித்துவ key Vue இன் மெய়நிகர் DOM diff ஐ திறம்பட செய்ய அனுமதிக்கிறது மற்றும் மீண்டும் ஏற்பாடு/வடிகட்டுதல்களில் நுட்பமான நிலை பொருத்தமற்ற பிழைகளை தவிர்க்கிறது.
சரியான id (ஆற்றல்மிக்க பட்டியல்களுக்கு நெடుஞ்சര் போன்றவை அல்ல) பயன்படுத்த மற்றும் v-for/v-if ஐ தனி வைத்திருக்க முக்கியம் சரியான, உயர்-நிष்பத்தி பட்டியல்களுக்கு அপরிহார்யம்.