Реактивные данные

Реактивность в Petite-Vue основана на идее автоматического обновления пользовательского интерфейса при изменении состояния данных. Библиотека создаёт тонкий слой между данными и DOM, который отслеживает зависимости и обновляет только нужные узлы. Такой подход уменьшает ручные операции с DOM и повышает согласованность интерфейса.

Petite-Vue использует reactive и ref из Vue 3 ядра. Объекты, созданные через reactive, становятся наблюдаемыми: чтение свойств фиксирует зависимости, запись — инициирует обновление. Примитивы, оформленные через ref, хранятся в поле .value, что делает их подходящими для простых величин.

Пример рабочего паттерна:

<div v-scope="{ count: 0 }">
  <button @click="count++">Увеличить</button>
  {{ count }}
</div>

Состояние count становится реактивным сразу после входа в область v-scope; Petite-Vue отслеживает использование значения в интерполяции и перерисовывает только узел с выводом числа.

Природа отслеживания изменений

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

Отдельные вычисления, включённые в шаблон, кешируются. Обновление запускается при изменении зависимости. Важный принцип: реактивность не возникает у свойств, добавленных постфактум, если они не присутствовали в момент инициализации.

Работа с вычисляемыми величинами

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

<div v-scope="{
  first: 'Petite',
  second: 'Vue',
  get full() { return first + '-' + second }
}">
  {{ full }}
</div>

Геттер full отслеживает оба свойства и обновится при изменении любого из них.

Комбинирование reactive и ref

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

Допустимая схема:

const state = reactive({
  list: ['a', 'b'],
  selected: ref(null)
});

Изменение selected.value приведёт к обновлению нужных участков интерфейса, без вмешательства в list.

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

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

Асинхронность и реактивность

Асинхронные операции не нарушают работу реактивности. После изменения данных внутри Promise или колбэка обновление произойдёт корректно. Petite-Vue опирается на микроочереди обновлений и не требует ручного вызова перерисовки. Тем не менее, большое количество асинхронных обновлений подряд требует оптимизации логики, чтобы не перегружать DOM лишними изменениями.

Ограничения реактивной модели

Реактивность в Petite-Vue не предназначена для сложных графов данных и глубоких структур с большим количеством наблюдаемых свойств. Архитектура ориентирована на малые интерфейсы и изолированные виджеты. Для крупных проектов применяют полноценный Vue с расширенным набором инструментов.

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

Практические рекомендации по моделированию состояния

  • Состояние группируется логически и хранится в области v-scope.
  • Производные значения оформляются в геттерах или вычисляются напрямую в шаблоне.
  • Изменения структур данных, таких как массивы и объекты, производятся методами, которые сохраняют реактивность: push, splice, замена элементов по индексу.
  • Добавление новых свойств в уже реактивный объект следует избегать, если требуется отслеживание.

Взаимодействие шаблона и состояния

Шаблон Petite-Vue интерпретирует реактивные данные через директивы, интерполяции и события. Каждое выражение в шаблоне связывается с соответствующими полями в реактивной области. При изменении значения перерисовываются только связанные узлы, без повторной обработки всего шаблона.

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

Оглавление