Циклы и списки: v-for

v-for — директива Vue.js, предназначенная для динамического рендеринга списков и массивов данных. Она позволяет создавать повторяющиеся элементы в DOM на основе данных из массива, объекта или числа повторений. Основное преимущество использования v-for заключается в автоматическом связывании данных и шаблона, что упрощает работу с динамическими интерфейсами.

Базовый синтаксис

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
  • item in items — цикл проходит по массиву items, каждый элемент доступен через переменную item.
  • :key="item.id" — уникальный идентификатор элемента, необходимый для оптимизации рендеринга. Vue использует ключи для отслеживания изменений и минимизации перерисовок.

Ключи являются обязательными при рендеринге списков, особенно если элементы могут добавляться, удаляться или изменяться динамически. Отсутствие ключей может привести к неправильной работе реактивности и неожиданным багам в интерфейсе.

Итерация по объектам

v-for поддерживает перебор свойств объектов:

<ul>
  <li v-for="(value, key) in user" :key="key">{{ key }}: {{ value }}</li>
</ul>
  • value — значение свойства.
  • key — имя свойства объекта.
  • index — опциональный параметр, показывающий порядковый номер элемента (начиная с 0).

Доступ к индексу элемента

Индекс элемента часто используется для отображения порядковых номеров или в качестве временного ключа (если нет уникального идентификатора):

<ul>
  <li v-for="(item, index) in items" :key="index">{{ index + 1 }}. {{ item.name }}</li>
</ul>

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

Генерация элементов на основе числа повторений

v-for может использоваться для повторения элементов заданное количество раз:

<div v-for="n in 5" :key="n">Элемент {{ n }}</div>

В этом случае Vue создает пять <div> элементов с числами от 1 до 5.

Вложенные циклы

v-for можно использовать внутри другого v-for, что удобно для работы с многомерными массивами или таблицами:

<table>
  <tr v-for="(row, rowIndex) in matrix" :key="rowIndex">
    <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
  </tr>
</table>

Вложенные циклы позволяют создавать сложные структуры данных, такие как сетки, таблицы и списки с группировкой.

Обработка событий внутри v-for

Директива v-for тесно интегрируется с обработчиками событий Vue. Можно назначать события на каждый элемент списка, передавая данные текущего элемента:

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
    <button @click="removeItem(item.id)">Удалить</button>
  </li>
</ul>

Метод removeItem может быть определен в methods компонента и обеспечивать удаление элемента из массива:

methods: {
  removeItem(id) {
    this.items = this.items.filter(item => item.id !== id);
  }
}

Благодаря реактивности Vue, список автоматически обновляется после изменения массива.

Оптимизация рендеринга

  1. Использование уникальных ключей — ключи должны быть стабильными и уникальными.
  2. Сведение к минимуму вложенных циклов — если возможно, преобразовать данные в плоскую структуру.
  3. Компоновка компонентов — для сложных элементов списка лучше создавать отдельные компоненты, которые будут получать данные через props. Это уменьшает количество перерисовок и улучшает читаемость кода.

Совместное использование с фильтрацией и сортировкой

Перед рендерингом списка массив можно фильтровать или сортировать прямо в шаблоне с использованием вычисляемых свойств (computed):

computed: {
  sortedItems() {
    return this.items.sort((a, b) => a.name.localeCompare(b.name));
  }
}
<ul>
  <li v-for="item in sortedItems" :key="item.id">{{ item.name }}</li>
</ul>

Такой подход сохраняет шаблон чистым и обеспечивает реактивное обновление интерфейса при изменении данных.

Особенности реактивности с v-for

  • Vue отслеживает изменения массива через методы push, pop, shift, unshift, splice, sort, reverse. Прямое присваивание по индексу (items[1] = newValue) не является реактивным, для этого следует использовать Vue.set или this.$set.
  • Изменение объекта в массиве через реактивные свойства корректно обновляет DOM.

Резюме

v-for — основной инструмент работы со списками и динамическим контентом в Vue.js. Он обеспечивает:

  • простую генерацию повторяющихся элементов;
  • интеграцию с реактивностью;
  • удобную работу с объектами, массивами и числами;
  • возможность связывать элементы с событиями и методами компонента.

Правильное использование ключей и структурирование данных позволяет создавать производительные и масштабируемые интерфейсы.

Оглавление