Що містить об'єкт methods?

VueJunior~1 хв читання

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

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

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

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

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

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()

Приклад:

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

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

html

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

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

html

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

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

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

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

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

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

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

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.