Использование массивов и методов их обработки в Vue

Главная

База знаний

vue

Основы работы с Vue.js

14 августа 2025

Автор

Олег Марков

Введение

Работа с массивами — одна из ключевых задач в разработке интерфейсов на Vue. Этот вопрос встречается буквально на каждом проекте: отображение списков, добавление и удаление элементов, сортировка, фильтрация, реактивное обновление отображаемых данных и многое другое. Vue предоставляет множество удобств для работы с массивами, сочетая простоту JavaScript с мощной системой реактивности. Здесь вы узнаете, как именно используются массивы во Vue, какие методы для их обработки существуют и как избежать типичных ошибок новичков.

Основы отображения массивов во Vue

Давайте для начала разберёмся, как выводить массивы на страницу с помощью Vue.

Как вывести массив в шаблоне

Во Vue для отображения массивов чаще всего используют директиву v-for.

Пример вывода простого массива

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

data() {
  return {
    items: [
      { id: 1, name: 'Яблоко' },
      { id: 2, name: 'Банан' },
      { id: 3, name: 'Апельсин' }
    ]
  }
}

// Здесь мы используем v-for для вывода массива объектов. :key нужен для оптимизации и правильного рендеринга списка.

Директива v-for: синтаксис и нюансы

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

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

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

Используйте для key уникальные значения (часто id из объектов), чтобы Vue правильно управлял списком при изменениях.

Работа с массивами в реактивном состоянии

Vue автоматически делает массивы реактивными, когда вы объявляете их в data. Но есть нюансы.

Добавление и удаление элементов

Добавление элемента

Добавим элемент кнопкой:

<button @click="addItem">Добавить элемент</button>
<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
  </li>
</ul>

data() {
  return {
    items: [
      { id: 1, name: 'Яблоко' },
      { id: 2, name: 'Банан' }
    ],
    nextId: 3
  }
},
methods: {
  addItem() {
    // Добавляем новый элемент в массив
    this.items.push({ id: this.nextId++, name: `Продукт №${this.nextId - 1}` })
  }
}

// После вызова addItem массив и список на странице будут обновлены автоматически благодаря реактивности Vue.

Удаление элемента

Вам может понадобиться удалять элементы по индексу или по id:

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

methods: {
  removeItem(index) {
    // Удаляет элемент по индексу из массива
    this.items.splice(index, 1)
  }
}

// Метод splice делает изменение реактивным.

Реактивность массивов: нюансы и подводные камни

Реактивность — ключевая фишка Vue. Но есть моменты, о которых важно знать.

Добавление или удаление по индексу

Если вы используете конструкцию вроде this.items[2] = новыйОбъект или напрямую меняете длину массива, Vue может не разглядеть эти изменения.

Как правильно задать новый элемент по индексу

// Не рекомендуется:
this.items[2] = { id: 5, name: 'Груша' } 

// Рекомендуется:
this.$set(this.items, 2, { id: 5, name: 'Груша' })

// $set гарантирует реактивное обновление.

// В Vue 3 вместо этого можно писать так (это работает корректно с реактивностью): this.items[2] = { id: 5, name: 'Груша' }

Удаление элементов через length

Если вы, например, уменьшаете размер массива:

this.items.length = 2

Это не всегда корректно обновляет DOM, особенно в Vue 2. Используйте методы splice, pop, shift для большей надёжности.

Следите за уникальностью ключей

Если key не уникален или меняется динамически, Vue может неверно отрисовать список (например, не тот элемент будет удалён или обновлён).

Применение вычисляемых свойств для обработки массивов

Вычисляемые свойства — мощный инструмент Vue, который часто применяют к работе с массивами: фильтрация, сортировка, подсчёты и агрегаты.

Пример фильтрации в computed:

computed: {
  толькоЯблоки() {
    // Оставляем только элементы с name равным 'Яблоко'
    return this.items.filter(item => item.name === 'Яблоко')
  }
}

В шаблоне:

<ul>
  <li v-for="item in толькоЯблоки" :key="item.id">
    {{ item.name }}
  </li>
</ul>

// Вычисляемое свойство толькоЯблоки будет автоматически пересчитываться при изменении массива items.

Пример сортировки:

computed: {
  отсортированныеФрукты() {
    // Сортируем фрукты по названию
    return [...this.items].sort((a, b) => a.name.localeCompare(b.name))
  }
}

// Используем spread чтобы не мутировать оригинальный массив

Массивы в Props и событиях — передача данных между компонентами

Vue предполагает часто работу с массивами не только внутри компонента, но и при обмене данными между ними.

Передача массива как props

// Родительский компонент
<fruit-list :items="myFruits"></fruit-list>

// Дочерний компонент
props: {
  items: {
    type: Array,
    required: true
  }
}

// Вы получаете массив, который можно безопасно обработать, выводить или мутировать (если договорились изменять именно здесь).

Изменения массива через события

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

// В дочернем компоненте
methods: {
  deleteItem(index) {
    this.$emit('delete', index)
  }
}

<!-- Родитель слушает -->
<fruit-list :items="myFruits" @delete="onDelete"></fruit-list>

methods: {
  onDelete(index) {
    this.myFruits.splice(index, 1) // Удаляем элемент у себя
  }
}

Взаимодействие с массивами через формы

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

Пример динамического списка и добавления элементов

<input v-model="newFruitName">
<button @click="addFruit">Добавить фрукт</button>
<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
  </li>
</ul>

data() {
  return {
    items: [],
    newFruitName: '',
    nextId: 1
  }
},
methods: {
  addFruit() {
    if (!this.newFruitName.trim()) return // Не добавляем пустое значение
    this.items.push({ id: this.nextId++, name: this.newFruitName })
    this.newFruitName = '' // Очищаем поле
  }
}

// Это типовой сценарий добавления элементов в массив на основе пользовательского ввода.

Масштабирование: массивы с вложенностью и работа с многоуровневыми структурами

Иногда ваши данные сложнее простого списка: например, товары с категориями, сообщения с вложенными комментариями.

Рекурсивный вывод массивов

При обработке многоуровневых списков используют рекурсивные компоненты:

// items: [{ id: 1, name: 'Категория', children: [...] }, ...]

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

// Здесь компонент CategoryList может вызывать сам себя для отображения вложенных данных

Эффективность: оптимизация больших списков

Vue отлично работает с относительно небольшими списками. Для больших коллекций (> 500–1000 элементов) рекомендуется использовать виртуализацию через сторонние библиотеки (например, vue-virtual-scroller).

Заключение

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

Частозадаваемые технические вопросы по теме

Вопрос 1: Как правильно отслеживать изменения в массиве объектов, если изменился объект внутри массива, а не сам массив?

Ответ:
Vue не всегда "видит" прямое изменение свойств объекта внутри массива (особенно если вы используете старый синтаксис). Решение — обновлять объект с помощью Vue.set (в Vue 2) или присваивать полностью новый объект. Например: js // Для Vue 2: this.$set(this.items, index, { ...this.items[index], name: 'Новое имя' }) // Для Vue 3: this.items[index] = { ...this.items[index], name: 'Новое имя' } Это гарантирует реактивное обновление.

Вопрос 2: Почему нельзя напрямую мутировать массив, переданный как props, в дочернем компоненте?

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

Вопрос 3: Как эффективно отслеживать изменения фильтрованного или отсортированного списка?

Ответ:
Используйте computed для создания фильтрованной/отсортированной версии массива. Изменения исходного массива автоматически отразятся на вычисленном свойстве благодаря реактивности Vue.

Вопрос 4: Как сделать reset/очистку массива?

Ответ:
Для полной очистки массива используйте this.items = [] или this.items.splice(0, this.items.length). Первый вариант подойдет, если массив не был передан через props.

Вопрос 5: Как избежать ошибок при использовании индекса в качестве key в v-for?

Ответ:
Используйте уникальные идентификаторы (например, id), а не index, чтобы избежать ошибок при изменении порядка элементов или их удалении. Index подходит только для статичных списков, которые никогда не будут изменяться.