Принципы реактивной системы

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

Ключевой принцип реактивности заключается в том, что данные, связанные с интерфейсом, становятся наблюдаемыми. Любое изменение такого свойства автоматически приводит к перерисовке тех частей интерфейса, которые от него зависят.

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

В Petite-Vue реактивное состояние создаётся с помощью функции createApp. Она принимает объект с данными и методами:

const { createApp } = PetiteVue;

createApp({
    message: 'Привет, Petite-Vue!',
    count: 0,
    increment() {
        this.count++;
    }
}).mount();

Особенности:

  • this внутри методов ссылается на объект приложения.
  • Любое изменение message или count автоматически обновляет привязанный DOM.
  • Методы могут использоваться для обработки событий, изменения состояния и вычислений.

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

Petite-Vue использует упрощённый набор директив:

  • v-text — вывод текста.
  • v-html — вставка HTML.
  • v-show — условное отображение.
  • v-if — условная вставка элемента.
  • v-for — циклический рендеринг коллекций.
  • @event — привязка событий (аналог v-on).

Пример с циклом и условием:


    {{ item.name }}

Здесь v-for создаёт реактивные элементы, а v-if динамически управляет их видимостью. Любое изменение свойства item.active приведёт к мгновенному обновлению интерфейса.

Реактивные вычисления

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

createApp({
    firstName: 'Иван',
    lastName: 'Иванов',
    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}).mount();

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

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

Методы приложения могут использоваться для изменения реактивных данных через this. Привязка событий реализуется через @:


{{ count }}

Метод increment увеличивает значение count, и автоматически обновляется.

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

Petite-Vue отслеживает изменения объектов и массивов. Любые методы изменения массива, такие как push, pop, splice, вызывают автоматический ререндер зависимых компонентов:

createApp({
    todos: [{ text: 'Купить хлеб', done: false }],
    addTodo(task) {
        this.todos.push({ text: task, done: false });
    }
}).mount();

Объекты внутри массива также являются реактивными:

this.todos[0].done = true; // автоматически обновляет DOM

Минимальная система реактивности

Под капотом Petite-Vue использует проксирование объектов. Это позволяет:

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

Принцип работы:

  • Чтение свойства — регистрация зависимого DOM или вычисляемого свойства.
  • Запись свойства — уведомление всех зависимых функций для обновления.

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

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

Связывание с DOM

Petite-Vue автоматически связывает данные с элементами через атрибуты v-* и интерполяцию {{ }}. Любое изменение состояния приводит к минимальному и точечному обновлению DOM, что обеспечивает высокую производительность при небольших приложениях.

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

Оглавление