Примитивы и объекты

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

Реактивные примитивы

В Petite-Vue примитивы — это простые значения: строки, числа, булевы значения. Они могут быть привязаны к DOM через атрибуты v-text, v-html, v-model и подобные.

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

Особенности работы с примитивами:

  • Любое изменение примитива автоматически обновляет все связанные с ним элементы DOM.
  • Примитивы внутри v-scope создаются реактивными без необходимости использования специальных функций.
  • Поддерживается деструктуризация объектов, что позволяет получать отдельные значения для использования внутри компонентов.
const scope = {
    message: 'Привет, Petite-Vue'
};
const { message } = scope; // message остаётся реактивным

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

Объекты в Petite-Vue могут содержать как примитивные свойства, так и вложенные объекты или массивы. Любое свойство объекта автоматически становится реактивным при объявлении внутри v-scope.

<div v-scope="{ user: { name: 'Иван', age: 30 } }">
    <p>Имя: {{ user.name }}</p>
    <p>Возраст: {{ user.age }}</p>
    <button @click="user.age++">Добавить год</button>
</div>

Ключевые моменты:

  • Изменение свойства объекта мгновенно отражается во всех связанных частях DOM.
  • Для обновления вложенных свойств реактивность сохраняется автоматически. Например, user.address.city = 'Москва' будет отслеживаться без дополнительных действий.
  • Добавление новых свойств к объекту после инициализации требует использования функции Vue.set или объявления свойства заранее, чтобы оно стало реактивным.

Массивы и методы массива

Массивы в Petite-Vue полностью реактивны и поддерживают большинство стандартных методов JavaScript, таких как push, pop, splice, filter, map. Любое изменение массива обновляет DOM при использовании директив v-for.

<div v-scope="{ items: ['Яблоко', 'Банан'] }">
    <ul>
        <li v-for="item in items">{{ item }}</li>
    </ul>
    <button @click="items.push('Апельсин')">Добавить фрукт</button>
</div>

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

  • Метод splice позволяет изменять массив с сохранением реактивности.
  • Использование методов, возвращающих новый массив (например, filter) требует присвоения результата обратно в реактивное свойство: items = items.filter(i => i !== 'Банан').
  • Массивы, как и объекты, можно вложенно структурировать: tasks = [{ name: 'Задача 1', done: false }].

Вычисляемые свойства и реактивные выражения

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

<div v-scope="{ a: 5, b: 10, sum() { return this.a + this.b } }">
    <p>Сумма: {{ sum() }}</p>
    <button @click="a++">Увеличить a</button>
</div>

Особенности вычисляемых свойств:

  • Выражения автоматически реагируют на любые изменения зависимых значений.
  • Функции внутри v-scope получают доступ к this, ссылаясь на текущий объект данных.
  • Можно создавать комплексные вычисления, комбинируя объекты и массивы.

Связывание примитивов и объектов с DOM

Petite-Vue предлагает несколько способов связывания:

  • Текстовое связывание: {{ variable }} или v-text="variable".
  • Динамические атрибуты: v-bind:class, v-bind:style, :disabled="isDisabled".
  • События: @click, @input, @change для привязки функций к изменениям состояния.

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

Глубокая реактивность

Объекты и массивы в Petite-Vue обладают глубокой реактивностью:

<div v-scope="{ user: { profile: { name: 'Анна' } } }">
    <p>{{ user.profile.name }}</p>
    <button @click="user.profile.name = 'Мария'">Изменить имя</button>
</div>
  • Любое вложенное свойство отслеживается автоматически.
  • Изменение значения на любом уровне структуры обновляет DOM без дополнительных действий.

Ограничения

  • Новые свойства объектов, добавленные после инициализации, не становятся реактивными автоматически.
  • Для больших структур рекомендуется инициализировать все свойства заранее.
  • Изменение массивов через прямое присваивание индекса, например items[2] = 'Груша', не всегда отслеживается корректно — лучше использовать методы массива.

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

Оглавление