Для чего нужно значение key в v-for?

Значение key в v-for во Vue.js

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

Зачем нужен key

1. Идентификация элементов Без key Vue соотносит элементы по индексу в массиве. Это приводит к проблемам когда список изменяется:

<template>
  <div>
    <button @click="addItem">Добавить</button>
    <input
      v-for="(item, index) in items"
      :key="index"
      :value="item.name"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' }
      ]
    };
  },
  methods: {
    addItem() {
      this.items.unshift({ id: 3, name: 'Charlie' });
    }
  }
};
</script>

Что происходит:

• Изначально: input[0] = Alice, input[1] = Bob
• После добавления Charlie: input[0] должен быть Charlie, но Vue переиспользует старые элементы
• Это приводит к потере состояния input (значения в полях остаются старыми)

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

<template>
  <div>
    <button @click="deleteFirst">Удалить первый</button>
    <div
      v-for="item in items"
      :key="item.id"
    >
      <input v-model="item.name" />
      <button @click="item.isChecked = !item.isChecked">
        {{ item.isChecked ? 'Done' : 'Todo' }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Task 1', isChecked: false },
        { id: 2, name: 'Task 2', isChecked: true },
        { id: 3, name: 'Task 3', isChecked: false }
      ]
    };
  },
  methods: {
    deleteFirst() {
      this.items.shift();
    }
  }
};
</script>

С key Vue знает, что нужно удалить именно первый элемент, сохраняя состояние остальных.

Основные проблемы БЕЗ key

Проблема 1: Потеря состояния в input элементах

<template>
  <div>
    <input v-for="(item, index) in items" :key="index" />
  </div>
</template>

<script>
export default {
  data() {
    return { items: ['A', 'B', 'C'] }
  }
};
</script>

Проблема 2: Статическое содержимое не обновляется

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item.id }} - {{ item.name }}
      <input :value="item.name" />
    </li>
  </ul>
</template>

Правильное использование key

1. Используйте уникальный ID из данных

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

2. Для объектов с id

<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      <input v-model="user.name" />
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 101, name: 'Alice' },
        { id: 102, name: 'Bob' },
        { id: 103, name: 'Charlie' }
      ]
    };
  }
};
</script>

3. Если ID нет, создайте уникальный идентификатор

<template>
  <div>
    <button @click="addTodo">Добавить</button>
    <div v-for="todo in todos" :key="todo.uuid">
      {{ todo.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return { todos: [] };
  },
  methods: {
    addTodo() {
      this.todos.push({
        uuid: Math.random().toString(36).substr(2, 9),
        text: 'New todo',
        completed: false
      });
    }
  }
};
</script>

Что НЕ следует делать

БЕЗ key для динамических списков и НЕ используйте случайные значения, так как это создаёт новый key при каждом ре-рендере.

Пример: Полноценный компонент со списком

<template>
  <div class="todo-list">
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add todo..." />
    
    <ul>
      <li v-for="todo in todos" :key="todo.id" class="todo-item">
        <input
          type="checkbox"
          v-model="todo.completed"
        />
        <span :class="{ completed: todo.completed }">
          {{ todo.text }}
        </span>
        <button @click="deleteTodo(todo.id)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
let nextId = 1;

export default {
  data() {
    return {
      newTodo: '',
      todos: [
        { id: nextId++, text: 'Learn Vue', completed: true },
        { id: nextId++, text: 'Use key in v-for', completed: false }
      ]
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push({
          id: nextId++,
          text: this.newTodo,
          completed: false
        });
        this.newTodo = '';
      }
    },
    deleteTodo(id) {
      this.todos = this.todos.filter(todo => todo.id !== id);
    }
  }
};
</script>

Атрибут key в v-for — это критически важный элемент правильной работы Vue приложений. Всегда используйте уникальные идентификаторы из ваших данных, а не индексы массива.