Массивы и реактивность

Petite-Vue — это облегчённая библиотека для реактивного программирования в браузере, вдохновлённая Vue.js, но с минимальным весом и упрощённым API. Одним из ключевых аспектов работы с Petite-Vue является реактивность данных, включая массивы. Понимание того, как библиотека отслеживает изменения в массивах, необходимо для эффективного управления состоянием интерфейса.

Создание реактивного массива

В Petite-Vue реактивные данные создаются через объект reactive, передаваемый в функцию createApp. Массивы можно включать прямо в объект данных:

const { createApp } = PetiteVue;

createApp({
  items: ['яблоко', 'банан', 'вишня']
}).mount();

Массив items становится реактивным. Любые изменения его содержимого автоматически отражаются в DOM, если они связаны через директивы вроде v-for или условные конструкции.

Работа с v-for

Для отображения элементов массива используется директива v-for. Она создаёт повторяющиеся элементы DOM, синхронизированные с реактивным массивом:

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

При добавлении или удалении элементов массива DOM обновляется автоматически. Petite-Vue отслеживает не сам массив, а операции с его методами, что обеспечивает реактивность.

Методы массивов и реактивность

Petite-Vue корректно обрабатывает стандартные методы массивов, влияющие на длину или порядок элементов:

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

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

createApp({
  items: ['яблоко', 'банан'],
  addItem() {
    this.items.push('киви');
  }
}).mount();

Вызов addItem() автоматически добавит новый элемент в DOM.

Особенности изменения элементов по индексу

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

this.items[1] = 'груша';

Petite-Vue обнаружит изменение и обновит связанный элемент DOM. Важно помнить, что добавление нового индекса, выходящего за текущую длину массива, также работает, так как библиотека делает все элементы реактивными динамически.

Итерация и ключи

При работе с массивами рекомендуется использовать уникальные ключи через директиву :key. Это позволяет корректно отслеживать перемещение элементов и минимизировать количество перерисовок:

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

Без ключей Petite-Vue будет повторно использовать DOM-элементы, что может привести к визуальным несоответствиям при перестановке элементов массива.

Реактивные массивы вложенных объектов

Если массив содержит объекты, Petite-Vue делает их свойства реактивными автоматически:

createApp({
  users: [
    { name: 'Иван', age: 25 },
    { name: 'Мария', age: 30 }
  ],
  incrementAge(index) {
    this.users[index].age++;
  }
}).mount();

Вызов incrementAge(0) увеличит возраст первого пользователя и автоматически обновит связанный DOM.

Ограничения реактивности

  1. Неподдерживаемые методы: методы вроде concat, slice, filter, map не изменяют исходный массив и не вызывают реактивного обновления сами по себе. Их можно использовать только для вычислений и создания новых массивов.
  2. Прямое присваивание нового массива: замена массива целиком, например this.items = ['новый', 'массив'], полностью перерисует связанные элементы DOM.

Комбинирование с вычисляемыми свойствами

Для сложных вычислений на основе массивов применяются вычисляемые свойства (computed). Они создаются через функции в объекте данных:

createApp({
  items: ['яблоко', 'банан', 'вишня'],
  get reversedItems() {
    return [...this.items].reverse();
  }
}).mount();

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

Отслеживание пустых массивов

Пустой массив также реактивен. Petite-Vue отслеживает добавление элементов и может динамически создавать DOM для новых данных:

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

<button @click="items.push('апельсин')">Добавить апельсин</button>

Нажатие кнопки добавляет элемент и сразу отображает его в списке.

Резюме ключевых аспектов работы с массивами

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

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

Оглавление