Работа с массивами и объектами

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

Реактивные массивы

Массивы в Vue становятся реактивными, если они определены в data. Любые изменения массива через встроенные методы Vue автоматически обновляют представление.

export default {
  data() {
    return {
      items: ['яблоко', 'банан', 'апельсин']
    }
  }
}

Поддерживаемые методы массива:

  • push(), pop(), shift(), unshift(), splice(), sort(), reverse()

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

this.items.push('груша'); // DOM обновится
this.items.splice(1, 1);  // удалит 'банан'

Особенности прямого присваивания элементов по индексу:

this.items[1] = 'киви';

Такое изменение не всегда реактивно, поэтому рекомендуется использовать метод splice:

this.items.splice(1, 1, 'киви');

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

Для отображения массивов используется директива v-for.

<ul>
  <li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
  • item — текущий элемент массива
  • index — индекс элемента
  • :key — уникальный идентификатор, который помогает Vue отслеживать изменения элементов

Использование уникального key критично для корректного обновления DOM при динамических изменениях массива.

Реактивные объекты

Объекты в Vue также реактивны, если определены в data.

export default {
  data() {
    return {
      user: {
        name: 'Иван',
        age: 30
      }
    }
  }
}

Изменение существующих свойств объекта автоматически отражается в шаблоне:

this.user.name = 'Пётр';

Добавление новых свойств: Vue 2 не отслеживает добавление новых свойств напрямую, поэтому используется Vue.set или метод this.$set:

this.$set(this.user, 'email', 'ivan@example.com');

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

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

Для перебора свойств объектов используется v-for с ключами:

<ul>
  <li v-for="(value, key) in user" :key="key">{{ key }}: {{ value }}</li>
</ul>
  • key — название свойства объекта
  • value — значение свойства

Композиция и методы массивов/объектов

Vue поддерживает использование вычисляемых свойств (computed) и методов (methods) для обработки массивов и объектов перед выводом.

Пример вычисляемого свойства для фильтрации массива:

computed: {
  fruitsStartingWithA() {
    return this.items.filter(item => item.startsWith('а'));
  }
}

Пример метода для изменения объекта:

methods: {
  updateAge(newAge) {
    this.user.age = newAge;
  }
}

События и реактивные изменения

При работе с массивами и объектами важно помнить, что изменения должны происходить внутри реактивных свойств, иначе Vue не сможет отслеживать изменения. Любые операции с копиями данных вне data не вызовут обновление DOM.

// Неправильно: создаём копию и меняем её
let copy = [...this.items];
copy.push('слива'); // DOM не обновится

// Правильно: меняем реактивный массив
this.items.push('слива'); // DOM обновится

Работа с массивами объектов

Часто используются массивы объектов. В таких случаях реактивность распространяется на свойства объектов внутри массива.

data() {
  return {
    tasks: [
      { id: 1, text: 'Купить хлеб', done: false },
      { id: 2, text: 'Позвонить другу', done: true }
    ]
  }
}
  • Для изменения свойства конкретного объекта лучше использовать реактивные методы:
this.tasks[0].done = true;
this.$set(this.tasks[1], 'text', 'Позвонить коллеге');
  • Для итерации:
<ul>
  <li v-for="task in tasks" :key="task.id">
    <input type="checkbox" v-model="task.done"> {{ task.text }}
  </li>
</ul>

v-model автоматически связывает значение свойства объекта с DOM, обеспечивая реактивное обновление.

Деструктуризация и реактивность

При деструктуризации объектов и массивов важно помнить, что выход за рамки реактивной структуры приведёт к потере автоматического обновления.

const { name } = this.user;
name = 'Алексей'; // не обновит DOM

Реактивное обновление будет работать только через исходный объект:

this.user.name = 'Алексей';

Итоговые принципы

  • Использовать методы Vue для изменения массивов и объектов.
  • Для добавления новых свойств в объект в Vue 2 использовать Vue.set/this.$set.
  • Всегда задавать key при v-for для массивов.
  • Для сложных вычислений использовать computed или methods.
  • Изменения должны происходить внутри реактивных данных.

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

Оглавление