Объявление методов

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

Определение методов

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

const { createApp } = PetiteVue;

createApp({
    data: {
        count: 0
    },
    methods: {
        increment() {
            this.count++;
        },
        reset() {
            this.count = 0;
        },
        multiply(factor) {
            this.count *= factor;
        }
    }
}).mount();

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

  • Методы получают доступ к реактивным данным через this.
  • Методы могут принимать аргументы для выполнения динамических операций.
  • В шаблоне методы вызываются через директиву @ для событий или в выражениях внутри {{ }}.

Вызов методов в шаблоне

Для привязки методов к событиям используется синтаксис @event="метод".

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

Можно передавать параметры прямо из шаблона:

<button @click="multiply(3)">Умножить на 3</button>

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

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

methods: {
    toggle() {
        this.visible = !this.visible;
    }
}
<div v-if="visible">Скрываемый блок</div>
<button @click="toggle">Переключить видимость</button>

Методы внутри v-scope

При использовании директивы v-scope методы объявляются прямо в объекте, передаваемом в директиву:

<div v-scope="{ count: 0, increment() { count++ } }">
    <button @click="increment">+</button>
    <span>{{ count }}</span>
</div>
  • Все функции внутри v-scope автоматически становятся методами.
  • Методы имеют доступ к реактивным переменным, объявленным в том же объекте.

Методы с возвращаемым значением

Методы могут возвращать значения и использоваться внутри выражений:

methods: {
    doubleCount() {
        return this.count * 2;
    }
}
<span>Удвоенное значение: {{ doubleCount() }}</span>

Обработка событий с аргументами

Методы позволяют передавать объект события или дополнительные параметры:

methods: {
    handleClick(event, message) {
        console.log(event.type, message);
    }
}
<button @click="handleClick($event, 'Привет')">Клик</button>
  • $event автоматически передаёт объект события.
  • Дополнительные параметры передаются после $event.

Методы и вложенные объекты

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

data: {
    user: {
        name: 'Иван',
        age: 25
    }
},
methods: {
    incrementAge() {
        this.user.age++;
    }
}
<button @click="incrementAge">Добавить год</button>
<span>{{ user.age }}</span>

Ограничения методов

  • Методы не должны создавать побочные эффекты вне реактивного состояния, если их цель — управлять компонентом.
  • Не рекомендуется обращаться напрямую к DOM внутри метода; предпочтительнее использовать реактивные свойства и директивы Petite-Vue.
  • Методы не сохраняются между разными экземплярами v-scope; каждый экземпляр получает собственные функции.

Использование стрелочных функций

Стрелочные функции внутри объекта methods не имеют собственного контекста this. В Petite-Vue это означает потерю доступа к реактивным данным, поэтому объявление методов через обычные функции предпочтительнее:

// Плохо
methods: {
    increment: () => {
        this.count++; // undefined
    }
}

// Хорошо
methods: {
    increment() {
        this.count++;
    }
}

Взаимодействие методов с computed-свойствами

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

data: {
    base: 5
},
computed: {
    squared() {
        return this.base ** 2;
    }
},
methods: {
    addSquare() {
        this.base += this.squared;
    }
}
<button @click="addSquare">Добавить квадрат</button>
<span>{{ base }}</span>

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

Оглавление