computed - значення, похідне від іншого стану. Vue кешує результат і перераховує його, лише коли змінилися реактивні залежності.
const items = ref([]);
const total = computed(() => items.value.reduce((sum, i) => sum + i.price, 0));
Метод у шаблоні ({{ calcTotal() }}) викликається при кожному рендері компонента, навіть якщо items не змінювалися. Для важких обчислень це зайва робота.
watch - не значення, а побічна дія у відповідь на зміну: запит на сервер, запис у localStorage, ручна робота з DOM.
watch(searchQuery, async (query) => {
results.value = await search(query);
});
Як обирати:
- Потрібно значення для шаблону чи коду -
computed. - Потрібно щось зробити, коли значення змінилося, -
watch. - Потрібна дія з аргументами за запитом (обробник кліку) - метод.
Типова помилка - watch, що просто записує похідне значення в інший ref:
watch(items, () => { total.value = sum(items.value); }, { deep: true }); // зайве
Це той самий computed, але з ручною синхронізацією, яку легко зламати.
computed має бути чистим: без запитів, змін іншого стану чи DOM. Інакше результат залежатиме від того, коли й скільки разів Vue вирішить його перерахувати.
