PassFront
  1. PassFront
  2. База знаний
  3. Реактивность

В чём разница между методами и 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

Другие вопросы раздела