Vue හි key ගුණාංගය

Vue විසින් v-for අණ පාලනය භාවිතයෙන් අඳින ලද අංග ලැයිස්තුවක් යාවත්කාලීන කරන විට, පෙරනිමි ලෙස "ස්ථානයේ" යාවත්කාලීන කිරීමේ උපාය මාර්ගය භාවිතා කරයි. අරාවක හෝ වස්තුවක මූලද්රව්ය අනුපිළිවෙල වෙනස් වුවහොත්, Vue DOM මූලද්රව්ය ගෙනයාම නොකර, සරලවම එක් එක් මූලද්රව්ය "ස්ථානයේ" යාවත්කාලීන කරනු ඇත, එමගින් අදාළ දර්ශකයට අනුකූලව නව දත්ත ප්‍රදර්ශනය කරයි.

Vue වෙත සෑම අංගයක අනන්‍යතාව හඳුනා ගන්නේ කෙසේදැයි උපදෙස් දීමට සහ, එමගින්, පවතින අංග නැවත භාවිතා කිරීමට හා සකස් කිරීමට, සෑම අංගයක් සඳහාම අනන්‍ය key ගුණාංගයක් නියම කිරීම අවශ්‍ය වේ.

යතුරු නොමැතිව Vue ඇල්ගොරිතමයක් භාවිතා කරයි, එමගින් අංග ගෙනයාම අවම කරන අතර එකම වර්ගයේ අංග වෙනස් කිරීම/නැවත භාවිතා කිරීම උපරිම වශයෙන් උත්සාහ කරයි. යතුරු භාවිතා කරන විට අංග යතුරු අනුපිළිවෙලෙහි වෙනසකට අනුකූලව නැවත සකස් කරනු ඇත, සහ යතුරු දැන් නොමැති අංග සෑම විටම ඉවත් කරනු ඇත/නිෂ්ප්‍රභ කරනු ඇත.

සෑම විටම v-for සමඟ key ගුණාංගය නියම කිරීම නිර්දේශ කෙරේ, DOM හි ගමන් කරන අන්තර්ගතය සරල වන විට හෝ කාර්ය සාධනය වැඩි දියුණු කිරීම සඳහා පෙරනිමි යාවත්කාලීන කිරීමේ උපාය මත සවිඥානකව රඳා සිටින විට හැර.

සාමාන්‍යයෙන් යතුරු එකතු කිරීමේ ප්‍රශ්නය පැන නගින්නේ වස්තු අරාවක් හරහා පුථුලනය කරන විටය. මෙම සිද්ධියේ වස්තුවක එක් යතුරක් වන්නේ අනන්‍ය ක්ෂේත්‍රයක්, උදාහරණයක් ලෙස, id:

data() {
	return {
		users: [
			{
				id: 1,
				name: 'name1',
				surn: 'surn1',
			},
			{
				id: 2,
				name: 'name2',
				surn: 'surn2',
			},
			{
				id: 3,
				name: 'name3',
				surn: 'surn3',
			},
		]
	}
}

අපි ඉහත අරාව පුථුලනය කරමු, අදාළ යතුරු නියම කරමින්:

<template>
	<p v-for="user in users" :key="user.id">
		{{ user.name }}
		{{ user.surn }}
	</p>
</template>

පහත අරාව පුථුලනය කර ul ලැයිස්තුවක් ලෙස නිෂ්පාදන නාමයන් ප්‍රදර්ශනය කරන්න:

data() {
	return {
		products: [
			{
				id: 1,
				name: 'product1',
			},
			{
				id: 2,
				name: 'product2',
			},
			{
				id: 3,
				name: 'product3',
			},
		]
	}
}