Обновление DOM

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

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

В основе обновления DOM лежат реактивные объекты. Любой объект, созданный с помощью reactive() или определённый через директиву v-scope, становится наблюдаемым. Любое изменение свойств этого объекта автоматически отражается в DOM.

const app = PetiteVue.createApp({
  message: "Привет, Petite-Vue!"
});

app.mount('#app');
<div id="app" v-scope="app">
  {{ message }}
</div>

При изменении свойства message в объекте app, текст в DOM обновляется без дополнительных манипуляций:

app.message = "Обновлённое сообщение";

Ключевой момент: реактивность работает только с теми свойствами, которые изначально определены в объекте состояния.

Директивы для обновления DOM

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

  • v-text — вставка текста.
  • v-html — вставка HTML-контента.
  • v-show — условное отображение элемента через CSS (display: none).
  • v-if / v-else / v-else-if — условный рендеринг элементов.
  • v-for — повторение элементов на основе массива.

Пример динамического списка с v-for:

<ul v-scope="{ items: ['яблоко', 'банан', 'вишня'] }">
  <li v-for="item in items">{{ item }}</li>
</ul>

Добавление элемента в массив автоматически создаёт новый <li>:

app.items.push('груша');

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

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

Для интерактивности используется директива @event (например, @click). События могут изменять состояние реактивного объекта, что приводит к мгновенному обновлению DOM.

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

Нажатие на кнопку увеличивает значение count, и текст <p> обновляется автоматически. Это демонстрирует двустороннюю связь между состоянием и интерфейсом.

Компоненты и реактивность

Petite-Vue позволяет создавать локальные компоненты с собственными состояниями. Каждое состояние компонента привязывается к его DOM-узлам.

PetiteVue.createApp({
  Counter: {
    count: 0,
    increment() {
      this.count++;
    }
  }
}).mount();
<div v-scope="Counter">
  <button @click="increment">+</button>
  <span>{{ count }}</span>
</div>

Изменение count обновляет только соответствующий компонент, не затрагивая остальной DOM. Это повышает производительность за счёт локального обновления узлов.

Оптимизация обновлений

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

  1. Избегать присваивания новым объектам без реактивного обёртывания.
  2. Использовать методы массивов, отслеживаемые библиотекой (push, splice, pop), вместо прямого изменения длины.
  3. Следить за тем, чтобы все динамические свойства были объявлены заранее.

Динамические атрибуты и классы

Petite-Vue позволяет динамически изменять атрибуты и классы через :attribute и :class. Любое изменение реактивного состояния моментально отражается в DOM.

<div v-scope="{ isActive: false }" :class="{ active: isActive }">
  Состояние активного класса
</div>
<button @click="isActive = !isActive">Переключить</button>

При изменении isActive класс active добавляется или удаляется автоматически. Это применимо к style и другим атрибутам: любые изменения состояния влияют на DOM без ручной работы с document.querySelector.

Выводы по обновлению DOM

Обновление DOM в Petite-Vue основано на реактивных объектах, минимальных изменениях и привязке состояния к элементам через директивы. Ключевые принципы:

  • Все изменения состояния автоматически отражаются в интерфейсе.
  • Директивы v-text, v-html, v-show, v-if, v-for управляют отображением.
  • События и методы компонентов изменяют состояние, инициируя обновление.
  • Оптимизация достигается локальным обновлением и отслеживанием массивов и объектов.

Эта модель позволяет создавать динамичные интерфейсы с минимальным кодом и высокой производительностью.

Оглавление