Контекст выполнения

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

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

Контекст выполнения создаётся при инициализации экземпляра Petite-Vue через директиву v-scope. Внутри элемента с этой директивой формируется локальный объект данных, который становится доступным для всех реактивных свойств, методов и вычисляемых значений.

<div v-scope="{ count: 0, increment() { this.count++ } }">
  <p>{{ count }}</p>
  <button @click="increment">Увеличить</button>
</div>

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

  • v-scope создаёт изолированный контекст, в котором данные не конфликтуют с другими частями страницы.
  • Методы и свойства доступны через this, что упрощает работу с реактивностью.
  • Контекст автоматически привязывается к дочерним элементам DOM.

Реактивные свойства

В Petite-Vue все свойства внутри контекста автоматически становятся реактивными. Любое изменение значения свойства мгновенно отражается в DOM.

<div v-scope="{ message: 'Привет, мир!' }">
  <input v-model="message" />
  <p>{{ message }}</p>
</div>

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

  • Присвоение нового значения свойству вызывает обновление всех связанных элементов DOM.
  • Добавление новых свойств после создания контекста не всегда автоматически делает их реактивными, поэтому желательно определять все необходимые поля заранее.

Методы и обработчики событий

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

<div v-scope="{ count: 0, decrement() { this.count-- } }">
  <p>{{ count }}</p>
  <button @click="decrement">Уменьшить</button>
</div>

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

  • Контекст методов всегда соответствует локальному объекту данных.
  • Обработчики событий (@click, @input) автоматически используют контекст элемента, что упрощает синтаксис по сравнению с классическим JavaScript.

Вложенные контексты

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

<div v-scope="{ user: { name: 'Иван' } }">
  <p>{{ user.name }}</p>
  <div v-scope="{ age: 30 }">
    <p>{{ user.name }} — {{ age }} лет</p>
  </div>
</div>

Особенности работы вложенных контекстов:

  • Родительский контекст доступен во вложенном.
  • Изменения в родительском контексте мгновенно отражаются в дочернем.
  • Локальные свойства вложенного контекста не влияют на родительский.

Вычисляемые свойства

Вычисляемые свойства (computed) создаются с помощью функции внутри контекста. Они автоматически отслеживают зависимости и пересчитываются при изменении связанных данных.

<div v-scope="{ price: 100, quantity: 2, total() { return this.price * this.quantity } }">
  <p>Итого: {{ total() }}</p>
</div>

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

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

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

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

<div v-scope="{
  count: 0,
  onMounted() { console.log('Контекст смонтирован') }
}">
  <p>{{ count }}</p>
</div>

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

  • onMounted вызывается после вставки контекста в DOM.
  • Можно добавлять аналогичные хуки для наблюдения за изменениями данных, хотя библиотека ограничена по сравнению с Vue.js.

Контекст и привязка к DOM

Petite-Vue автоматически связывает реактивные данные с DOM через синтаксис {{ }} и директивы v-model, @event. Внутри контекста выполняются все изменения данных, а библиотека обновляет только затронутые элементы, что обеспечивает эффективную работу и минимизацию лишних операций.

Пример связывания данных и событий:

<div v-scope="{ text: '', updateText(e) { this.text = e.target.value } }">
  <input @input="updateText" />
  <p>{{ text }}</p>
</div>
  • Изменение в <input> напрямую отражается на text.
  • Реактивность не требует ручного вызова render или аналогов.

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

Оглавление