Атрибут key у Vue-у

При ажурирању Vue листе елемената, коју је исцртала директива v-for, подразумевано се користи стратегија ажурирања "in-place". Ако се редослед елемената низа или објекта променио, Vue неће преместити DOM елементе, већ ће једноставно ажурирати сваки елемент "in-place", тако да приказује нове податке на одговарајућем индексу.

Да бисте Vue-у дали назнаку како да утврди идентитет сваког елемента, и тиме поново искористи и преуреди постојеће елементе, потребно је навести јединствени атрибут key за сваки елемент.

Без кључева, Vue користи алгоритам који минимизира померање елемената и у максималној могућој мери ће тежити да мења/поново користи елементе истог типа. Када се користе кључеви, елементи ће бити преуређени у складу са променом редоследа кључева, док ће елементи чији кључеви више не постоје, бити увек уклоњени/уништени.

Препоручује се да увек наведете атрибут key са v-for, осим у случајевима када је садржај DOM-a који се итерира једноставан, или када свесно ослањате на подразумевану стратегију ажурирања ради побољшања перформанси.

У питање додавања кључева обично се наилази при итерацији кроз низ објеката. У том случају, један од кључева објекта је јединствено поље, на пример, 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',
      },
    ]
  }
}