Чим computed відрізняється від звичайного методу?

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

computed і звичайний метод у Vue виглядають схожими - обидва можуть щось «обчислювати». Але працюють вони принципово по-різному.

Ось головне:

computed кешується і перераховується тільки при зміні залежностей. method виконується заново щоразу при рендері.

Розберемо це максимально зрозуміло.

1. Основна відмінність

computed - значення, що кешується

Якщо залежні дані не змінювалися → Vue НЕ запускає функцію знову.

method - завжди перераховується

Метод викликається щоразу, коли компонент рендериться.

Приклад, що показує різницю

javascript

<script setup>
import { ref, computed } from 'vue'

const count = ref(1)

const computedDouble = computed(() => {
  console.log("computed called")
  return count.value * 2
})

function methodDouble() {
  console.log("method called")
  return count.value * 2
}
</script>

<template>
  <p>{{ computedDouble }}</p>
  <p>{{ methodDouble() }}</p>
</template>

Поведінка:

computed:

Виведе "computed called" один раз,
поки count не зміниться - більше не викличеться.

method:

Виведе "method called" щоразу при рендері,
іноді багато разів поспіль.

2. Поведінка при рендері

Що робить	computed	method
Кешує результат	Так	Ні
Виконується при кожному рендері	Ні	Так
Перераховується тільки при зміні залежностей	Так	Ні
Використовується як змінна	Так	Ні (як функція)