Що таке computed()?

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

computed() - це функція з Composition API (Vue 3), яка створює обчислювану властивість (computed property) - значення, яке автоматично перераховується, коли змінюються його залежності, і кешується, поки залежності не зміняться.

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

computed() - це реактивне значення, яке обчислюється на основі інших реактивних даних і "ліниво" перераховується тільки за потреби.

Це один з найважливіших інструментів Vue.

Як працює computed()?

import { ref, computed } from 'vue'

const count = ref(2)

const double = computed(() => count.value * 2)

double залежить від count
Vue автоматично відстежує залежність
якщо count зміниться -> double перерахується
якщо не змінюється - Vue повертає кешоване значення

Головна відмінність computed від звичайної функції

computed() кешується. Звичайна функція - ні.

Приклад:

const total = computed(() => expensiveCalculation())

expensiveCalculation() буде викликана:

один раз, поки залежні дані не зміняться
потім повертається кеш

Якби це була просто функція:

function total() {
  return expensiveCalculation()
}

вона б викликалася щоразу при рендері шаблону.

Приклад у компоненті

vue

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

const price = ref(100)
const count = ref(3)

const total = computed(() => price.value * count.value)
</script>

<template>
  <p>Разом: {{ total }}</p>
</template>

total оновиться автоматично при зміні price або count.

computed() може бути змінюваним (get + set)

const firstName = ref('Alex')
const lastName = ref('Smith')

const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})

Використання:

fullName.value = "John Doe"

Коли використовувати computed?

1. Коли значення залежить від інших значень

ціна x кількість = разом

2. Для складних обчислень, які повинні кешуватися

Наприклад сортування масиву:

const sorted = computed(() => items.value.sort())

3. Коли потрібне "віртуальне" поле на основі даних

Наприклад форматування:

const formattedDate = computed(() => dayjs(date.value).format('DD.MM.YYYY'))

4. Для двосторонніх значень з get/set

Наприклад поле fullName, складене з двох частин.

Коли НЕ потрібно використовувати computed?

Якщо потрібно виконати побічний ефект

Для цього є watch або watchEffect.

Якщо значення не повинно кешуватися

Якщо потрібно перераховувати на кожен рендер - краще метод.

computed vs watch (важливо для співбесід)

computed	watch
повертає значення	стежить за значенням
завжди синхронний	може бути асинхронним
кешується	не кешується
для обчислень	для побічних ефектів

Підсумок (ідеально для співбесіди)

computed() створює обчислювану реактивну властивість, яка автоматично оновлюється при зміні залежностей і кешується, поки залежності не змінюються. Використовується для похідних даних, складних обчислень і віртуальних полів. Може бути з get/set для двосторонньої логіки.

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

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

Premium

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