В чём разница между методами и Computed свойствами?

Методы vs Computed свойства

Вопрос касается Vue.js (или React с дополнительными инструментами). Разберу оба подхода, их особенности и когда что использовать.

Computed свойства (вычисляемые свойства)

Computed — это реактивные свойства, которые вычисляются на основе других реактивных данных. Результат кэшируется и пересчитывается только когда изменятся зависимости:

// Vue 3 Composition API
import { computed, ref } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed(() => {
  console.log('Computing fullName');
  return `${firstName.value} ${lastName.value}`;
});

fullName.value; // 'John Doe' -> логируется 'Computing fullName'
fullName.value; // 'John Doe' -> НЕ логируется (кэш)
firstName.value = 'Jane'; // изменили зависимость
fullName.value; // 'Jane Doe' -> логируется 'Computing fullName' снова

Ключевые особенности:

• Кэширование: результат сохраняется, пока не изменятся зависимости
• Реактивность: автоматически отслеживает используемые в нём реактивные переменные
• Синхронность: вычисляется синхронно
• Правило: не вызывай побочные эффекты (API, console.log — для отладки можно)
• Использование в шаблоне: как переменная, без скобок {{ fullName }}

Методы

Методы — это функции, которые вызываются явно. Они выполняются каждый раз при вызове:

// Vue 3 Composition API
const firstName = ref('John');
const lastName = ref('Doe');

const getFullName = () => {
  console.log('Calling getFullName');
  return `${firstName.value} ${lastName.value}`;
};

getFullName(); // 'John Doe' -> логируется 'Calling getFullName'
getFullName(); // 'John Doe' -> логируется 'Calling getFullName' снова (нет кэша)
firstName.value = 'Jane';
getFullName(); // 'Jane Doe' -> логируется 'Calling getFullName'

Ключевые особенности:

• Без кэширования: вычисляется каждый раз при вызове
• Явный вызов: нужны скобки {{ getFullName() }}
• Асинхронность: можно использовать async/await
• Побочные эффекты: можно делать (API запросы, изменение других переменных)
• Гибкость: полный контроль над логикой выполнения

Главные отличия

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

Computed для вычисления:

// Фильтрация списка
const questions = ref([
  { id: 1, title: 'React', solved: false },
  { id: 2, title: 'Vue', solved: true },
  { id: 3, title: 'Angular', solved: false }
]);

const unsolvedQuestions = computed(() => {
  return questions.value.filter(q => !q.solved);
});

// В шаблоне:
// {{ unsolvedQuestions.length }} нерешённых вопросов

Это эффективно, потому что если questions не изменился, фильтрация не повторяется.

Метод для действий с побочными эффектами:

const submitForm = async (data) => {
  try {
    const response = await api.post('/questions', data);
    showNotification('Question added');
    refreshList();
  } catch (error) {
    showError(error);
  }
};

// В шаблоне:
// <button @click="submitForm(formData)">Submit</button>

Здесь нужны побочные эффекты (API запрос, уведомление), поэтому метод — правильный выбор.

Вложенность в другие Computed

const firstName = ref('John');
const lastName = ref('Doe');
const age = ref(28);

// Computed зависит от других Computed
const fullName = computed(() => `${firstName.value} ${lastName.value}`);

const userProfile = computed(() => ({
  name: fullName.value, // используем другой computed
  age: age.value,
  description: `${fullName.value} is ${age.value} years old`
}));

// userProfile автоматически обновляется если изменится firstName, lastName или age

Контроль реактивности (Vue 3)

Computed со сложной логикой:

const selectedCategory = ref('frontend');
const searchQuery = ref('');

const filteredQuestions = computed(() => {
  let result = questions.value;
  
  // Фильтруем по категории
  if (selectedCategory.value) {
    result = result.filter(q => q.category === selectedCategory.value);
  }
  
  // Фильтруем по поиску
  if (searchQuery.value) {
    result = result.filter(q => 
      q.title.toLowerCase().includes(searchQuery.value.toLowerCase())
    );
  }
  
  // Сортируем
  return result.sort((a, b) => a.title.localeCompare(b.title));
});

Это кэшируется, пока не изменятся selectedCategory или searchQuery.

Сеттер для Computed

Computed может быть двусторонним (с геттером и сеттером):

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (value) => {
    const [first, last] = value.split(' ');
    firstName.value = first;
    lastName.value = last;
  }
});

fullName.value = 'Jane Smith';
console.log(firstName.value); // 'Jane'
console.log(lastName.value);  // 'Smith'

Рекомендации

Используй Computed когда:

• Нужно преобразовать или фильтровать данные
• Вычисление может быть дорогостоящим (и нужно кэширование)
• Результат используется несколько раз в шаблоне
• Не нужны побочные эффекты

const totalPrice = computed(() => 
  items.value.reduce((sum, item) => sum + item.price, 0)
);

Используй методы когда:

• Нужны побочные эффекты (API, обновление других данных)
• Логика связана с пользовательскими действиями
• Результат не требует кэширования
• Нужна асинхронность

const fetchQuestions = async (categoryId) => {
  loading.value = true;
  try {
    const data = await api.getQuestions(categoryId);
    questions.value = data;
  } finally {
    loading.value = false;
  }
};

Производительность

// Плохо: вычисляется при каждом рендере
<div>{{ expensiveCalculation() }}</div>

// Хорошо: вычисляется один раз и кэшируется
<div>{{ cachedCalculation }}</div>

const cachedCalculation = computed(() => expensiveCalculation());

Вывод

Computed — для чистых вычислений с кэшированием результата, методы — для действий и побочных эффектов. Правильный выбор улучшает производительность и читаемость кода.