В чём разница между методами и Computed свойствами?
Реактивность
Методы выполняются при каждом вызове, а computed-свойства кешируются и пересчитываются только при изменении своих реактивных зависимостей.
Пример
export default {
data: () => ({ items: [] }),
computed: {
total() {
return this.items.reduce((sum, item) => sum + item.price, 0);
},
},
methods: {
formatPrice(value) {
return `${value} ₽`;
},
},
};Отличия
totalв шаблоне можно использовать много раз — сумма посчитается один раз, покаitemsне изменится.- Метод вызывается при каждом рендере, где он используется.
- Метод может принимать аргументы и выполнять действия (обработчики кликов), computed — нет.
Как выбирать
Производное значение для отображения — computed. Обработчик события или функция с параметрами — метод.
Коротко для собеседования
computed кешируется по зависимостям и подходит для вычисляемых данных, методы выполняются заново при каждом вызове и подходят для действий.
Подробнее: Vue — Computed