Методы в контексте компонента

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

Объявление и использование методов

Методы задаются как обычные функции внутри объекта, передаваемого в createApp. Например:

const App = {
  message: 'Привет, Petite-Vue!',
  count: 0,
  increment() {
    this.count++
  },
  greet(name) {
    return `${this.message} ${name}`
  }
}

createApp(App).mount('#app')

В данном примере:

increment изменяет реактивное свойство count.
greet возвращает строку, комбинируя статическое сообщение и переданный аргумент.

Методы можно вызывать напрямую из шаблона с помощью директивы @ для событий или внутри других методов.

<button @click="increment">Увеличить</button>
<p>{{ count }}</p>
<p>{{ greet('Иван') }}</p>

Контекст `this` в методах

Ключевой особенностью методов в Petite-Vue является правильный контекст this. Он всегда ссылается на объект компонента, что позволяет безопасно обращаться к реактивным данным и другим методам:

logAndIncrement() {
  console.log(this.count)
  this.increment()
}

Попытка использовать стрелочную функцию в объявлении метода изменяет контекст this, и доступ к реактивным данным станет невозможным:

// Некорректно
incrementArrow: () => {
  this.count++ // Ошибка: this не ссылается на компонент
}

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

Методы тесно связаны с реактивностью данных. Любое изменение реактивного свойства через метод автоматически отражается в DOM. Это позволяет управлять интерфейсом без прямого обращения к элементам страницы:

toggle() {
  this.isActive = !this.isActive
}

<div :class="{ active: isActive }"></div>
<button @click="toggle">Переключить</button>

Параметры методов

Методы могут принимать параметры, что делает их гибкими для обработки динамических данных. Аргументы передаются напрямую из шаблона:

updateMessage(newMessage) {
  this.message = newMessage
}

<input @input="updateMessage($event.target.value)" placeholder="Введите текст">
<p>{{ message }}</p>

Вызов методов внутри других методов

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

incrementTwice() {
  this.increment()
  this.increment()
}

Это позволяет создавать цепочки операций без дублирования кода и упрощает поддержку.

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

Методы отличаются от вычисляемых свойств тем, что не кэшируются. Каждый вызов метода приводит к выполнению функции заново, что полезно для динамических вычислений, зависящих от внешних параметров:

randomNumber(max) {
  return Math.floor(Math.random() * max)
}

В шаблоне:

<p>{{ randomNumber(100) }}</p>

Каждый рендер будет генерировать новое число, в отличие от вычисляемого свойства, которое кэшируется до изменения зависимостей.

Методы с асинхронной логикой

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

async fetchData() {
  const response = await fetch('https://api.example.com/data')
  const data = await response.json()
  this.items = data
}

В шаблоне асинхронный метод можно вызвать через событие:

<button @click="fetchData">Загрузить данные</button>
<ul>
  <li v-for="item in items">{{ item.name }}</li>
</ul>

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