Vue में key एट्रिब्यूट

Vue द्वारा v-for डायरेक्टिव से रेंडर किए गए एलिमेंट्स की लिस्ट अपडेट करते समय, डिफ़ॉल्ट रूप से "इन-प्लेस" अपडेट स्ट्रैटेजी का उपयोग किया जाता है। यदि ऐरे या ऑब्जेक्ट के एलिमेंट्स का क्रम बदल गया है, तो Vue DOM एलिमेंट्स को स्थानांतरित नहीं करेगा, बल्कि प्रत्येक एलिमेंट को "इन-प्लेस" अपडेट कर देगा, ताकि वह संबंधित इंडेक्स पर नए डेटा को प्रदर्शित कर सके।

Vue को यह बताने के लिए कि प्रत्येक एलिमेंट की पहचान कैसे确定 की जाए, और इस प्रकार, मौजूदा एलिमेंट्स का पुन: उपयोग और क्रमबद्ध किया जाए, प्रत्येक एलिमेंट के लिए एक यूनिक एट्रिब्यूट key निर्दिष्ट करना आवश्यक है।

कुंजियों के बिना, Vue एक ऐसी एल्गोरिदम का उपयोग करता है जो एलिमेंट्स के स्थानांतरण को कम से कम करती है और एक ही प्रकार के एलिमेंट्स को अधिकतम संभव परिवर्तित/पुन: उपयोग करने का प्रयास करेगी। कुंजियों का उपयोग करने पर, एलिमेंट्स कुंजियों के क्रम में परिवर्तन के अनुसार पुन: क्रमबद्ध होंगे, और those एलिमेंट्स जिनकी कुंजियां अब मौजूद नहीं हैं, हमेशा हटा दिए/नष्ट कर दिए जाएंगे।

v-for के साथ key एट्रिब्यूट निर्दिष्ट करने की हमेशा सिफारिश की जाती है, सिवाय उन मामलों के जब DOM सामग्री सरल है, या जब आप जानबूझकर प्रदर्शन में सुधार के लिए डिफ़ॉल्ट अपडेट रणनीति पर भरोसा करते हैं।

आम तौर पर, कुंजियों को जोड़ने का सवाल तब उठता है जब ऑब्जेक्ट्स की एक सरणी पर पुनरावृति की जाती है। इस मामले में, ऑब्जेक्ट की कुंजियों में से एक एक यूनिक फ़ील्ड होती है, उदाहरण के लिए, id:

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

आइए दिए गए ऐरे पर लूप के साथ पुनरावृति करें, संबंधित कुंजियाँ निर्दिष्ट करते हुए:

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

Задание 1

निम्नलिखित ऐरे पर लूप के साथ पुनरावृति करें और उत्पादों के नामों को ul लिस्ट के रूप में प्रदर्शित करें:

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