Атрыбут key у Vue

Пры абнаўленні 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',
      },
    ]
  }
}