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

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

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

const app = PetiteVue.createApp({
  message: "Hello",
});
app.mount("#app");

При изменении message все связанные с ним DOM-элементы обновятся автоматически.

Ограничения при работе с объектами

  1. Добавление новых свойств Реактивная система Petite-Vue не отслеживает динамически добавленные свойства после инициализации объекта. Например:
const state = PetiteVue.reactive({ name: "Alice" });
state.age = 25; // не будет реактивным

Чтобы сделать новое свойство реактивным, его нужно определить заранее либо использовать reactive с новым объектом:

state = PetiteVue.reactive({ ...state, age: 25 });
  1. Удаление свойств Удаление свойства через delete также не отслеживается реактивностью:
delete state.name; // не вызовет обновление DOM

В таких случаях рекомендуется использовать новую реактивную структуру или присваивание пустого значения.

  1. Вложенные объекты Реактивность распространяется только на объекты, обернутые reactive. Глубокие вложенные объекты должны быть также реактивными:
const state = PetiteVue.reactive({
  user: { name: "Alice", age: 30 }
});
// state.user.name будет реактивным
state.user.location = "Paris"; // не реактивно

Для полной реактивности вложенных объектов нужно создать их заранее:

const state = PetiteVue.reactive({
  user: PetiteVue.reactive({ name: "Alice", age: 30, location: "Paris" })
});

Ограничения при работе с массивами

  1. Методы массива Большинство стандартных методов массивов (push, pop, shift, unshift, splice) корректно отслеживаются и вызывают обновление DOM.
const list = PetiteVue.reactive(["apple", "banana"]);
list.push("orange"); // DOM обновится
  1. Присваивание по индексу Присваивание нового значения по индексу может не отслеживаться:
list[1] = "grape"; // может не вызвать реактивное обновление

Рекомендуется использовать splice, чтобы изменения были реактивными:

list.splice(1, 1, "grape"); // корректно
  1. Длина массива Прямое изменение свойства length не гарантирует обновление:
list.length = 1; // не всегда реактивно

Лучше использовать методы удаления элементов (pop, splice) для управления длиной.

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

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

let count = PetiteVue.reactive(0);
count++; // реактивность работает корректно

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

Ограничения при работе с computed и watch

  1. Computed свойства Computed свойства автоматически отслеживают зависимости, но не могут быть реактивными, если внутри используется некорректно инициализированный объект или массив.
const app = PetiteVue.createApp({
  numbers: PetiteVue.reactive([1,2,3]),
  total() {
    return this.numbers.reduce((a, b) => a + b, 0);
  }
});

Если массив будет изменён через прямое присваивание индекса, total не обновится.

  1. Watchers Следят за реактивными свойствами, но не реагируют на неучтённые динамические изменения объектов и массивов.

Ограничения шаблонного синтаксиса

  1. v-for с объектами При переборе свойств объекта реактивность отслеживается только для заранее определённых свойств.
<div v-for="(value, key) in state.user">{{ key }}: {{ value }}</div>

Добавление новых свойств в state.user после инициализации не обновит DOM.

  1. v-if и v-show Реактивность полностью сохраняется, но условие должно основываться на реактивных свойствах.

  2. Ключи компонентов Изменение структуры данных без обновления ключей компонентов может привести к некорректному рендерингу.

Практические рекомендации

  • Все объекты и массивы должны быть определены заранее с полным набором свойств, которые планируется использовать реактивно.
  • Для динамических изменений использовать методы splice, создание новых реактивных объектов и массивов.
  • Вложенные объекты и массивы должны быть обернуты в reactive для полной реактивности.
  • Примитивные значения лучше хранить внутри объектов, чтобы иметь возможность расширения структуры при необходимости.

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

Оглавление