Що таке обчислювані властивості (computed)?

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

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

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

computed - це «розумні змінні», які самі оновлюються, коли потрібно.

Простий приклад

javascript

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

const firstName = ref("Tim")
const lastName = ref("Petrov")

// обчислювана властивість
const fullName = computed(() => {
  return firstName.value + " " + lastName.value
})
</script>

<template>
  <p>{{ fullName }}</p>
</template>

Коли змінюється firstName або lastName -> fullName перераховується автоматично.

Основні властивості computed

1) Автоматично перераховується

Якщо залежні дані змінилися - computed оновиться.

2) Кешується

Якщо залежності не змінювалися, Vue не перераховує значення повторно.

Це економить ресурси й робить застосунок швидшим.

Приклад

javascript

const double = computed(() => {
  console.log("перерахунок")
  return count.value * 2
})

Якщо UI 5 разів звернеться до double, але count НЕ змінився -> лог виведеться один раз.

Computed vs methods

Що	computed	methods
Кешування	Так	Ні
Викликається	При зміні залежностей	Щоразу під час рендеру
Використання	Для derived state	Для дій / логіки

Приклад, де computed кращий:

javascript

<p>{{ expensiveCalculation }}</p>

Якби це був method - він виконувався б при кожному перемальовуванні, що повільно.

Як оголошуються computed у Composition API?

javascript

const sum = computed(() => a.value + b.value)

В Options API:

javascript

computed: {
  sum() {
    return this.a + this.b
  }
}

Двонаправлені обчислювані властивості (getter + setter)

Computed може мати і get, і set:

javascript

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

const name = ref("Tim")

const formattedName = computed({
  get() {
    return name.value.toUpperCase()
  },
  set(newValue) {
    name.value = newValue.toLowerCase()
  }
})
</script>