Как работает computed?

Как работает Computed в Vue.js

Computed (вычисляемое свойство) — это реактивное свойство, которое автоматически пересчитывается при изменении зависимостей. Это ключевая концепция в Vue.js для декларативной обработки реактивных данных.

Основной принцип работы

Вычисляемое свойство кэшируется и зависит от своих реактивных зависимостей. Когда зависимость изменяется, computed пересчитывается автоматически. Код выполняется лениво — только при обращении к значению.

Getter и Setter

По умолчанию computed имеет только getter (функция для получения значения):

const fullName = computed(() => {
  return firstName.value + lastName.value;
});

Можно также определить setter для двусторонней синхронизации:

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

Кэширование и производительность

Основное преимущество — кэширование результатов. Если зависимости не изменились, computed вернёт закэшированный результат без повторного вычисления:

const fullName = computed(() => {
  console.log("Пересчёт");
  return firstName.value + " " + lastName.value;
});

console.log(fullName.value); // Log: "Пересчёт"
console.log(fullName.value); // Ничего не логируется (кэш)

firstName.value = "Иван"; // Изменилась зависимость
console.log(fullName.value); // Log: "Пересчёт"

Сравнение с методами

Вычисляемые свойства часто путают с методами, но они принципиально различаются:

// Computed — кэшируется
const fullName = computed(() => firstName.value + " " + lastName.value);

// Method — вычисляется каждый раз
const getFullName = () => firstName.value + " " + lastName.value;

В шаблоне:

{{ fullName }}      // Использует кэш
{{ getFullName() }} // Вычисляется каждый раз

Практический пример

import { ref, computed } from "vue";

export default {
  setup() {
    const count = ref(0);
    const isEven = computed(() => {
      return count.value % 2 === 0;
    });

    return {
      count,
      isEven,
      increment: () => count.value++
    };
  }
};

Реактивные зависимости

Computed автоматически отслеживает все реактивные зависимости, используемые внутри функции:

const users = ref([]);
const activeCount = computed(() => {
  return users.value.filter(u => u.active).length;
});

При изменении массива users computed пересчитается автоматически.

Когда использовать Computed

• Преобразование данных — форматирование, фильтрация, сортировка
• Комбинирование значений — объединение нескольких реактивных источников
• Условная логика — вычисление статусов и флагов
• Кэширование — когда вычисление дорогостоящее

Computed — это мощный инструмент для написания чистого, эффективного и декларативного кода в Vue.js.