Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Чим computed відрізняється від звичайного методу?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`computed`** - це значення, яке кешується і перераховується тільки при зміні залежностей, а **звичайний метод** виконується заново щоразу при рендері компонента. **Ключове:** computed використовують як змінну для похідних значень у шаблоні, а method - для дій і сайд-ефектів.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`computed` і звичайний метод у Vue виглядають схожими - обидва можуть щось «обчислювати». Але **працюють вони принципово по-різному**. Ось головне: **computed кешується і перераховується тільки при зміні залежностей.** **method виконується заново щоразу при рендері.** Розберемо це максимально зрозуміло. --- ## 1. Основна відмінність ### **computed - значення, що кешується** Якщо залежні дані не змінювалися → Vue НЕ запускає функцію знову. ### **method - завжди перераховується** Метод викликається **щоразу**, коли компонент рендериться. --- ## Приклад, що показує різницю ```javascript <script setup> import { ref, computed } from 'vue' const count = ref(1) const computedDouble = computed(() => { console.log("computed called") return count.value * 2 }) function methodDouble() { console.log("method called") return count.value * 2 } </script> <template> <p>{{ computedDouble }}</p> <p>{{ methodDouble() }}</p> </template> ``` Поведінка: #### computed: - Виведе `"computed called"` **один раз**, - поки `count` не зміниться - більше не викличеться. #### method: - Виведе `"method called"` **щоразу при рендері**, - іноді багато разів поспіль. --- ## 2. Поведінка при рендері | Що робить | computed | method | |---|---|---| | Кешує результат | Так | Ні | | Виконується при кожному рендері | Ні | Так | | Перераховується тільки при зміні залежностей | Так | Ні | | Використовується як змінна | Так | Ні (як функція) | --- ## 3. Коли використовувати computed? #### Використовуй computed, коли: значення залежить від інших реактивних даних потрібен derived state (похідне значення) важлива продуктивність значення використовується в шаблоні Приклади: - фільтрація масиву - форматування дати - підрахунок кількості товарів - перетворення рядка в UPPERCASE - складна логіка, що виводиться в шаблон --- ## 4. Коли використовувати method? Метод потрібен, коли: потрібно виконати дію обчислення НЕ повинно кешуватися потрібні сайд-ефекти це не derived state Приклади: - відправлення запиту - логування - зміна стану - обробка кліків --- ## Підсумок (коротко) **computed:** - як змінна - кешується - перераховується тільки при зміні залежностей - оптимізовано для продуктивності **method:** - як функція - викликається при кожному рендері - не кешується - підходить для дій, а не обчисленьДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.