Как использовать директиву for в шаблоне?vue-16

Директива v-for - один из наиболее часто используемых инструментов во Vue для рендеринга списков данных. Рассмотрим все аспекты ее применения.

1. Базовый синтаксис v-for

Итерация по массиву:

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

Итерация с индексом:

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

2. Итерация по объекту

Получение значений:

<div v-for="value in object">
  {{ value }}
</div>

Получение ключей и значений:

<div v-for="(value, key) in object" :key="key">
  {{ key }}: {{ value }}
</div>

С индексацией:

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

3. Использование с компонентами

<my-component
  v-for="(item, index) in items"
  :key="item.id"
  :item="item"
  :index="index"
/>

4. Особые случаи

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

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

Итерация по диапазону чисел:

<span v-for="n in 10" :key="n">{{ n }}</span>

5. Ключевые правила

  1. Обязательное использование :key:

    • Должен быть уникальным
    • Лучше использовать id, а не index
    • Помогает Vue эффективно обновлять DOM

  2. Не изменять массив во время рендеринга:

    • Избегать изменений внутри v-for
    • Использовать computed свойства для фильтрации

  3. Оптимизация производительности:

    • Для больших списков использовать virtual scrolling
    • Избегать сложных вычислений внутри v-for

6. Примеры лучших практик

Фильтрация через computed:

computed: {
  activeItems() {
    return this.items.filter(item => item.isActive);
  }
}

<div v-for="item in activeItems" :key="item.id">...</div>

Использование метода в v-for:

<div v-for="item in sortedItems()" :key="item.id">...</div>

Резюмируем

Ключевые моменты использования v-for: ✔ Всегда указывать уникальный :key (лучше ID, чем index)
✔ Поддерживает итерацию по массивам, объектам и числам
✔ Можно получать (item, index) для массивов
✔ Для объектов доступны (value, key, index)
✔ С компонентами работает аналогично DOM-элементам
✔ Для сложных сценариев использовать computed свойства

Типичные ошибки: ✖ Изменение данных во время рендеринга
✖ Использование index как key для изменяемых списков
✖ Сложные вычисления внутри v-for

Правильное использование v-for - залог производительного и поддерживаемого кода во Vue-приложениях.

Вопросы

Собеседования