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

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

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

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

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

Це один з ключових інструментів реактивності у Vue.

Приклад обчислюваної властивості (Options API)

computed: {
  double() {
    return this.count * 2
  }
}

Якщо this.count змінюється - Vue перерахує double.

Якщо ні - поверне закешоване значення.

Приклад обчислюваної властивості (Composition API)

import { ref, computed } from 'vue'

const count = ref(2)

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

Головна відмінність computed від methods

methods - викликаються щоразу, при кожному рендері

computed - викликаються тільки при зміні залежностей (кешуються)

Приклад:

html

<p>{{ heavyCalculation() }}</p> <!-- викликається щоразу -->
<p>{{ heavyValue }}</p>        <!-- кешується -->

heavyValue - computed:

const heavyValue = computed(() => heavyCalculation())

Коли використовувати обчислювані властивості?

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

Наприклад:

підсумок замовлення: price * quantity
фільтрація списку
форматування даних
перетворення рядків/дат

2. Щоб кешувати результати дорогих операцій

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

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

3. Коли потрібна "віртуальна властивість" об'єкта

Наприклад:

fullName = firstName + " " + lastName

Computed з getter/setter

Обчислювані властивості можуть бути двосторонніми:

const fullName = computed({
  get() {
    return firstName.value + " " + lastName.value
  },
  set(value) {
    [firstName.value, lastName.value] = value.split(" ")
  }
})

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

fullName.value = "John Doe"

Як працює computed під капотом?

Vue відстежує залежності, які використовуються всередині функції.
Якщо будь-яка із залежностей змінилася → computed перераховується.
Якщо ні → повертається кеш.

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

Коли потрібно виконати дію (side-effect)

Тоді потрібен watch.

Коли потрібно викликати функцію з аргументами

Computed не приймає аргументи → використовуйте метод.

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

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

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

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

Premium

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