Директива v-scope

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

v-scope используется как атрибут HTML-элемента. Внутри передается объект, определяющий реактивные свойства, методы и вычисления. Значение передается в виде JavaScript-выражения.

<div v-scope="{ count: 0 }">
  {{ count }}
</div>

Любое изменение count автоматически отражается в DOM. Petite-Vue применяет минимальный механизм реактивности, что делает синтаксис лаконичным и предсказуемым.

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

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

<div v-scope="{
  count: 0,
  inc() { this.count++ }
}">
  <button @click="inc">+</button>
  {{ count }}
</div>

this в методах всегда указывает на реактивный объект. Это облегчает перенос логики в шаблон и поддерживает единый стиль.

Вычисляемые значения

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

<div v-scope="{
  a: 2,
  b: 3,
  sum() { return this.a + this.b }
}">
  {{ sum() }}
</div>

Значение пересчитывается при каждом обновлении DOM.

Инициализация состояния

v-scope может ссылаться на функцию, возвращающую объект. Такой прием используется, когда требуется выполнение логики при создании компонента.

<div v-scope="() => ({
  items: ['A', 'B'],
  add(x) { this.items.push(x) }
})">
  <button @click="add('C')">Добавить</button>
  {{ items }}
</div>

Функция вызывается единожды, результат становится реактивным.

Вложенные v-scope

Компоненты на основе v-scope могут быть вложенными. Внутренний контекст не перекрывает внешний полностью, а дополняет его через цепочку доступа.

<div v-scope="{ a: 1 }">
  <span>{{ a }}</span>
  <div v-scope="{ b: 2 }">
    {{ a + b }}
  </div>
</div>

Контекст разрешается от внутреннего к внешнему, если свойство не найдено в текущем объекте.

Разделение логики и шаблонов

v-scope допускает передачу ссылки на заранее объявленный объект или модуль. Такой подход используется в более крупных приложениях.

<script>
  const model = {
    value: 10,
    double() { return this.value * 2 }
  }
</script>

<div v-scope="model">
  {{ double() }}
</div>

В этом случае объект становится реактивным целиком, без дополнительного кода обертки.

Динамические выражения

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

Жизненный цикл и ленивость

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

Использование с событиями

Вместе с v-scope обычно применяется директива @event. Реактивный объект обрабатывает события напрямую, что позволяет сосредоточиться на логике.

<div v-scope="{
  toggle: false,
  flip() { this.toggle = !this.toggle }
}">
  <button @click="flip">Switch</button>
  {{ toggle ? 'ON' : 'OFF' }}
</div>

Передача данных между компонентами

При вложенном v-scope обмен осуществляется через поиски по цепочке контекстов. Для более сложных случаев используется внешнее хранилище (например, собственный объект или подписки). Petite-Vue не навязывает архитектуру и не предоставляет встроенный глобальный стор.

Совмещение с v-effect

v-effect выполняется при изменении зависимостей и работает поверх v-scope. Директива фиксирует реактивные зависимости в момент выполнения эффекта.

<div v-scope="{ x: 1 }">
  <span v-effect="console.log(x)"></span>
</div>

Каждое обновление x вызывает повторный вывод. Такой подход обеспечивает гибкость без внедрения специального API.

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

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

Работа со списками

v-scope корректно взаимодействует с v-for. Каждый элемент списка получает свой собственный реактивный контекст.

<ul v-scope="{ items: [1,2,3] }">
  <li v-for="n in items" v-scope="{ n }">
    {{ n }}
  </li>
</ul>

Объекты внутри цикла могут расширяться методами и состоянием без влияния на родительский контекст.

Минимум абстракций

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

Оглавление