Что такое Petite-Vue

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

Ключевые особенности:

  • Минимальный размер и отсутствие необходимости сборки.
  • Реактивные данные с отслеживанием изменений.
  • Декларативный синтаксис для связывания данных и DOM.
  • Простая интеграция в существующий HTML.

Инициализация приложения

Petite-Vue работает без сложной инфраструктуры. Для создания реактивного приложения используется функция createApp, которая связывает объект данных с DOM.

<div id="app" v-scope="{ message: 'Привет, Petite-Vue!' }">
    <p>{{ message }}</p>
</div>

<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module';

createApp().mount();
</script>

Разбор примера:

  • v-scope — директива, которая определяет область видимости реактивных данных.
  • {{ message }} — синтаксис интерполяции, автоматически обновляющий DOM при изменении значения message.
  • createApp().mount() — инициализация всех областей с v-scope на странице.

Реактивные данные и их обновление

Любое свойство объекта в v-scope автоматически становится реактивным. Изменения в данных мгновенно отражаются в DOM.

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

Особенности реактивности:

  • Используется Proxy для отслеживания изменений.
  • Поддерживаются простые операции над числами, строками и массивами.
  • Изменение вложенных объектов также отслеживается, но для сложных структур может потребоваться явное объявление реактивных свойств.

Директивы Petite-Vue

Petite-Vue использует директивы, похожие на Vue.js, но только ключевые:

  1. v-scope — создаёт область реактивности.
  2. @event — обработка событий. Например, @click, @input.
  3. v-if / v-else — условный рендеринг элементов.
  4. v-for — перебор массивов и объектов для генерации элементов.
<div v-scope="{ items: ['яблоко', 'банан', 'груша'], show: true }">
    <ul>
        <li v-for="item in items">{{ item }}</li>
    </ul>
    <button @click="show = !show">Переключить</button>
    <p v-if="show">Список видим</p>
</div>

Особенности директив:

  • v-for поддерживает перебор массивов и объектов с доступом к ключам и индексам.
  • v-if полностью удаляет или вставляет элемент в DOM.
  • @event связывает функции с событиями без дополнительного синтаксиса.

Двустороннее связывание данных

Для форм Petite-Vue поддерживает двустороннее связывание через директиву v-model.

<div v-scope="{ text: '' }">
    <input v-model="text" placeholder="Введите текст">
    <p>Вы ввели: {{ text }}</p>
</div>
  • Любое изменение в поле ввода автоматически обновляет переменную text.
  • Изменение переменной text программно обновляет значение поля.

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

Методы можно определять прямо в области видимости v-scope. Они вызываются из шаблона через события или вычисления.

<div v-scope="{
    count: 0,
    increment() { this.count++ },
    double() { return this.count * 2 }
}">
    <button @click="increment">+</button>
    <p>Счётчик: {{ count }}</p>
    <p>Вдвое: {{ double() }}</p>
</div>
  • Методы используют this для доступа к реактивным данным.
  • Вычисляемые свойства реализуются как методы без необходимости отдельного синтаксиса.

Интеграция с существующим HTML

Petite-Vue можно внедрять постепенно, оборачивая отдельные блоки на странице:

<div class="widget" v-scope="{ visible: false }">
    <button @click="visible = !visible">Показать/Скрыть</button>
    <p v-if="visible">Контент виден</p>
</div>
  • Нет необходимости переписывать всю страницу.
  • Можно комбинировать с классическими скриптами и стилями.

Работа с массивами и динамическими элементами

Изменения массивов (push, splice, pop) автоматически отражаются в DOM при использовании v-for.

<div v-scope="{ todos: ['Учеба', 'Кодинг'] }">
    <ul>
        <li v-for="(todo, index) INTOdos">{{ todo }}
            <button @click="todos.splice(index, 1)">Удалить</button>
        </li>
    </ul>
    <button @click="todos.push('Новая задача')">Добавить</button>
</div>
  • Встроенные методы массивов отслеживаются реактивно.
  • Новые элементы автоматически получают реактивные свойства.

Декларативная обработка стилей и классов

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

<div v-scope="{ active: false }">
    <button @click="active = !active">Переключить</button>
    <p :class="{ 'highlight': active }">Текст</p>
</div>
  • :class принимает объект, где ключ — имя класса, значение — булево выражение.
  • :style позволяет динамически задавать стили через объект или строку.

Асинхронные операции и watch

Для отслеживания изменений данных можно использовать реактивные эффекты с помощью функции watchEffect:

<script type="module">
import { createApp, watchEffect } from 'https://unpkg.com/petite-vue?module';

createApp({
    data() {
        return { count: 0 }
    },
    mounted() {
        watchEffect(() => console.log(`Счётчик = ${this.count}`));
    }
}).mount();
</script>
  • watchEffect автоматически запускается при любом изменении реактивного свойства.
  • Подходит для логирования, синхронизации с API или других побочных эффектов.

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

Оглавление