Skip to main content

Чому computed - це фактично memoized getter?

VueJunior~1 хв читання
Запропонувати правку

computed у Vue - це фактично мемоізований геттер, тому що він:

  1. має обчислювальну функцію (getter)
  2. кешує результат
  3. перераховує значення лише при зміні залежностей

Тобто він працює не як звичайна функція, а як мемоізована, з відстеженням реактивних джерел.

Розберемо за пунктами.

1. У computed є get-функція

Коли ви пишете:

js
const fullName = computed(() => user.first + ' ' + user.last)

Ви фактично визначаєте геттер:

  • він нічого не зберігає в собі
  • він обчислює значення при зверненні
  • він прив'язаний до реактивних залежностей (user.first, user.last)

2. computed кешує результат (мемоізація)

Коли computed вперше викликається, Vue:

  1. обчислює значення,
  2. зберігає його всередині об'єкта computed,
  3. більше не викликає обчислювальну функцію, поки залежності не зміняться.

Тобто наступний рендер НЕ викликає функцію знову.

Перевірка:

js
const count = ref(0) const doubled = computed(() => { console.log('computed recalculated') return count.value * 2 }) doubled.value // виведе: "computed recalculated" doubled.value // нічого не виводиться - береться з кешу!

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

Vue автоматично відстежує реактивні залежності всередині геттера.

Якщо залежна змінна змінилася:

js
count.value++

тоді computed:

  • позначається як "брудний"
  • геттер викличеться знову при наступному зверненні

Це класична мемоізація: перераховувати лише якщо змінилися аргументи.

4. computed оновлюється ліниво (lazy evaluation)

Це важлива частина мемоізації.

Computed НЕ перераховується одразу при зміні залежності. Він перераховується лише тоді, коли хтось звертається до .value.

Наприклад:

js
count.value++

Не викличе перерахунок. Але:

js
doubled.value

викличе перерахунок (якщо залежність змінилася).

5. computed поводиться як "кеш з автоінвалідацією"

Це і є найточніше визначення:

computed - це кешований getter, який автоматично інвалідується, коли його залежності змінюються.

Тобто:

  • є кеш
  • є залежність
  • є автоматична перевірка
  • є перерахунок за потреби

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

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

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

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