Vue-ում key ատրիբուտը

Vue-ի կողմից v-for դիրեկտիվով պատկերված տարրերի ցուցակը թարմացնելիս լռելյայն օգտագործվում է «տեղում» թարմացման ստրատեգիա: Եթե զանգվածի կամ օբյեկտի տարրերի հերթականությունը փոխվել է, Vue-ն չի տեղափոխի DOM տարրերը, այլ պարզապես կթարմացնի յուրաքանչյուր տարրը «տեղում», որպեսզի այն ցուցադրի համապատասխան ինդեքսով նոր տվյալները:

Որպեսզի Vue-ին հուշել, թե ինչպես որոշել յուրաքանչյուր տարրի նույնականությունը, և այդպիսով վերաօգտագործել և դասավորել գոյություն ունեցող տարրերը, անհրաժեշտ է յուրաքանչյուր տարրի համար նշել ունիկալ key ատրիբուտ:

Առանց բանալիների Vue-ն օգտագործում է ալգորիթմ, որն նվազագույնի է հասցնում տարրերի տեղափոխությունը և առավելագույնս կփորձի փոփոխել/վերաօգտագործել նույն տիպի տարրերը: Բանալիների օգտագործման դեպքում տարրերը կվերադասավորվեն՝ համապատասխանելով բանալիների հերթականության փոփոխությանը, իսկ այն տարրերը, որոնց բանալիներն այլևս բացակայում են, միշտ կհեռացվեն/կոչնչացվեն:

Խորհուրդ է տրվում միշտ նշել key ատրիբուտը v-for-ի հետ, բացառությամբ այն դեպքերի, երբ 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>

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