Атрибут key в Vue3

Vue3 内置属性Встроенные атрибуты Vue3

keyАтрибут — это критически важный специальный атрибут алгоритма виртуального DOM Vue, в основном используемый, чтобы помочь Vue определять уникальность каждого узла и тем самым эффективно обновлять виртуальный DOM.

Базовое описание

keyАтрибут используется для предоставления уникального идентификатора компонентам или элементам Vue. При рендеринге списка каждыйv-forэлемент в цикле должен иметь уникальныйkeyатрибута.

  • Тип: String | Number
  • Назначение: Предоставляет уникальный идентификатор для каждого элемента при рендеринге списка, помогая Vue эффективно выполнять diff и повторно использовать DOM-узлы.

Как это работает

Когда Vue выполняет diff виртуального DOM, когда нетkeykey, Vue использует алгоритм, который минимизирует перемещение элементов, по возможности повторно используя элементы того же типа на месте. Когда естьkeykey, Vue переупорядочивает элементы в соответствии с изменениями порядка key и удаляет элементы, чей key больше не существует.

Дочерние элементы одного и того же родительского элемента должны иметь уникальные ключи. Дублирующиеся ключи вызовут ошибки рендеринга.

Базовое использование

Наиболее частое использование — в сочетанииv-forс v-for:

Пример

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
  </li>
</ul>

Сценарии использования

1. Рендеринг списков

Вv-forиспользование keykeyявляется наиболее распространённым:

Пример

<template>
  <div>
    <div v-for="user in users" :="user.id" :style="{ marginBottom: '10px' }">
      <span>{{ user.id }}</span> -
      <span>{{ user.name }}</span> -
      <span>{{ user.email }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
{ id: 1, name: 'Zhang San', email: '[email protected]' },
{ id: 2, name: 'Li Si', email: '[email protected]' },
{ id: 3, name: 'Wang Wu', email: '[email protected]' }
      ]
    }
  }
}
</script>

2. Принудительная замена элемента

keyЭто также можно использовать для принудительной замены элементов или компонентов вместо их повторного использования. Это полезно в следующих сценариях:

  • Корректный запуск хуков жизненного цикла компонента
  • Запуск анимаций перехода

Пример

<template>
  <div>
    <input v-model="text" placeholder=Когда содержимое поля ввода />
    <transition>
      <span :key="text">{{ text }}</span>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    }
  }
}
</script>

Когдаtextизменения,<span>элемент заменяется, а не используется повторно, тем самым запуская эффект перехода.

Примечания

key должен быть уникальным и стабильным: значение key не должно меняться при изменении данных, иначе это повлияет на производительность Vue и стратегию повторного использования виртуального DOM.

Избегайте использования индекса в качестве ключа: если только вы точно не знаете, что порядок элементов списка не изменится. Поскольку индекс основан на позиции, при изменении порядка списка ключ также меняется, из-за чего Vue не может корректно повторно использовать DOM-узлы.

Пример

<!-- Не рекомендуется: использовать индекс в качестве ключа (когда порядок списка меняется) -->
<li v-for="(item, index) in items" :key="index">{{ item.name }}</li>

<!-- Рекомендуется: использовать уникальный ID в качестве ключа -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>

Использование с v-for

keyиv-forПри совместном использовании есть несколько синтаксисов:

Пример

<!-- Итерация по массиву -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>

<!-- Итерация с индексом -->
<li v-for="(item, index) in items" :key="index">{{ index }} - {{ item.name }}</li>

<!-- Итерация по объекту -->
<li v-for="(value, key, index) in object" :key="key">
  {{ index }}. {{ key }}: {{ value }}
</li>

<!-- Итерация чисел -->
<span v-for="n in 5" :key="n">{{ n }}</span>

Vue3 内置属性Встроенные атрибуты Vue3

Другие расширения