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

Инициализация приложения в Petite-Vue опирается на минималистичную модель «объявить реактивные данные — привязать к DOM — активировать приложение». Библиотека ориентирована на использование в уже существующей разметке, без сложного этапа сборки.

Стандартный путь предполагает загрузку Petite-Vue через <script> с CDN. После загрузки глобальный объект предоставляет функцию createApp, используемую для создания реактивного контекста.

Пример подключения:

<script src="https://unpkg.com/petite-vue"></script>

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

createApp принимает объект, свойства которого становятся источниками реактивности. Значения изменяются в коде или по инициативе пользователя, после чего DOM автоматически обновляется.

const app = PetiteVue.createApp({
  count: 0,
  inc() {
    this.count++
  }
})

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

Привязка к DOM

Для связывания реактивного контекста с разметкой используется метод mount. Он принимает CSS-селектор или DOM-элемент. Библиотека просматривает поддерево и активирует специальные директивы.

app.mount('#app')

С этого момента шаблон становится живым: {{ count }} отображает текущее значение, а директивы v-on, v-bind, v-model и другие обеспечивают интерактивность.

Инициализация без промежуточных переменных

Petite-Vue позволяет обходиться без сохранения промежуточной ссылки на приложение. Конструкция createApp({...}).mount(selector) активирует приложение в одну строку.

PetiteVue.createApp({
  message: 'Привет'
}).mount('#root')

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

Инициализация нескольких корневых узлов

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

PetiteVue.createApp({ a: 1 }).mount('#widgetA')
PetiteVue.createApp({ b: 2 }).mount('#widgetB')

Независимость экземпляров исключает конфликты имен и позволяет инкапсулировать логику.

Инициализация без глобального объекта

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

import { createApp } from 'petite-vue'

createApp({
  flag: true
}).mount('#root')

Использование модулей устраняет необходимость в глобальном объекте и облегчает интеграцию со сборщиками.

Автоматическая активация по атрибуту

Дополнительный путь инициализации включает атрибут v-scope. При наличии атрибута Petite-Vue автоматически ищет и активирует участки DOM. Подход делает код декларативным и еще более компактным.

<div v-scope="{ count: 0 }">
  {{ count }}
  <button @click="count++">+</button>
</div>
<script src="https://unpkg.com/petite-vue"></script>
<script>
  PetiteVue.createApp().mount()
</script>

Внутри объекта v-scope задаются начальные реактивные данные. Метод mount без аргументов активирует весь документ.

Инициализация в динамических контекстах

Petite-Vue поддерживает создание экземпляров на узлах, которые появляются в DOM позднее. После вставки узла можно вызвать createApp и mount, что позволяет внедрять интерактивные компоненты в динамически генерируемую разметку.

Приемы структурирования данных при инициализации

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

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

Ключевые особенности инициализации

  • Инициализация минимальна по объему кода.
  • Реактивность подключается только к указанному поддереву DOM, что снижает накладные расходы.
  • Экземпляры работают независимо, без единого глобального состояния по умолчанию.
  • Доступны декларативные варианты через v-scope и императивные — через createApp().mount(...).

Взаимодействие после инициализации

Экземпляр приложения предоставляет доступ к реактивным данным через this. Методы объявляются внутри объекта при создании, что упрощает управление состоянием. Изменение данных после инициализации мгновенно отражается в DOM, без дополнительных вызовов обновления.

Интеграция с существующей разметкой

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

Оглавление