Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що містить об'єкт methods?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

В об'єкті `methods` у Vue (в Options API) містяться **звичайні функції**, які стають методами компонента і доступні:

- у шаблоні (`template`)
- через `this` всередині компонента
- в обробниках подій (`v-on`)
- у внутрішніх обчисленнях компонента

Простіше кажучи:

> `methods` **містить функції, які можна викликати з шаблону або коду компонента.**

---

## Приклад об'єкта methods

```js
export default {
  data() {
    return {
      count: 0
    }
  },

methods: {
    increment() {
      this.count++
    },
    reset() {
      this.count = 0
    }
  }
}
```

У шаблоні:

```html
<button @click="increment">+</button>
<button @click="reset">Reset</button>
```

---

## Що важливо знати про methods

### 1. Методи - це звичайні функції

Вони НЕ кешуються, як computed.
Виконуються щоразу, коли викликаються в шаблоні.

---

### 2. Методи мають доступ до `this`

Тобто:

- `this.count`
- `this.dataProperty`
- `this.someComputed`
- `this.someMethod()`

Приклад:

```js
methods: {
  sayHello() {
    console.log("Hello", this.name)
  }
}
```

---

### 3. Методи використовуються в обробниках подій

```html
<button @click="logout">Logout</button>
```

---

### 4. Методи можуть приймати аргументи

```html
<button @click="add(5)">+5</button>
```

```js
methods: {
  add(n) {
    this.count += n
  }
}
```

---

### 5. Методи - НЕ альтернатива для обчислень (використовуйте computed)

Якщо функція обчислює значення на основі реактивних даних:

- краще `computed`
- гірше `method` (тому що не кешується)

---

### 6. Методи доступні лише в Options API

У Composition API замість них - звичайні функції в `setup()`.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати225 слів

Для рев’юера

Бачить лише модератор. Прискорює рев’ю.