> Что такое вычисляемые свойства (computed) во Vue и для чего они нужны (Vue.js)

Короткий ответ

Вычисляемые свойства (computed) во Vue - это функции, которые возвращают производное значение на основе реактивных данных и автоматически пересчитываются только при изменении своих зависимостей. Они нужны для декларативного описания вычислений, которые должны кешироваться и обновляться реактивно, в отличие от методов, которые выполняются при каждом вызове.

Подробное объяснение

Computed properties - это свойства экземпляра Vue, которые вычисляются на основе других реактивных данных и кешируются. Они объявляются в опции computed компонента. Основная особенность - они пересчитываются только тогда, когда изменяется хотя бы одна из их реактивных зависимостей. Это делает их эффективными для сложных вычислений, которые не должны выполняться при каждом ререндере.

Computed свойства ведут себя как обычные свойства - к ним обращаются без вызова как к функции (this.fullName, а не this.fullName()). Они могут быть как геттерами (только для чтения), так и сеттерами (для записи). В отличие от методов, computed кешируют результат до изменения зависимостей, что критично для производительности при частых ререндерах.

На практике

Computed свойства используются для:

• Форматирования данных (например, отображение даты в нужном формате)
• Фильтрации и сортировки списков
• Комбинирования нескольких полей (например, полное имя из имени и фамилии)
• Вычисления итоговых значений (сумма корзины, среднее арифметическое)
• Инвертирования или трансформации данных без мутации исходных

Важно: computed не должны иметь побочных эффектов (изменять другие данные, делать запросы). Для этого существуют watchers. Если нужно выполнить действие при изменении данных - используйте watch, если нужно вычислить значение - computed.

Пример кода

JAVASCRIPT
// Базовый пример
data() {
  return {
    firstName: 'Иван',
    lastName: 'Петров',
    items: [
      { price: 100, quantity: 2 },
      { price: 200, quantity: 1 }
    ]
  }
},
computed: {
  // Геттер - только чтение
  fullName() {
    return `${this.firstName} ${this.lastName}`
  },
  
  // Сеттер - позволяет записывать значение
  fullNameWithSetter: {
    get() {
      return `${this.firstName} ${this.lastName}`
    },
    set(newValue) {
      const parts = newValue.split(' ')
      this.firstName = parts[0]
      this.lastName = parts[1]
    }
  },
  
  // Вычисление на основе массива
  totalPrice() {
    return this.items.reduce((sum, item) => sum + item.price * item.quantity, 0)
  },
  
  // Фильтрация с кешированием
  expensiveItems() {
    return this.items.filter(item => item.price > 150)
  }
}

Как отвечать на собеседовании

Начни с определения: "Computed - это вычисляемые свойства, которые кешируются и пересчитываются только при изменении зависимостей". Подчеркни разницу с методами: "Методы выполняются при каждом вызове, а computed - только когда меняются данные". Приведи пример из практики: "Я использую computed для форматирования дат, фильтрации списков и вычисления итогов". Упомяни, что computed не должны иметь побочных эффектов - это чистая функция. Если спросят про сеттер, объясни, что он нужен для двусторонней привязки, но используется редко.

Что проверяет интервьюер

• Понимание реактивности Vue и механизма кеширования
• Умение отличать computed от methods и watch
• Знание, когда использовать computed, а когда - другие инструменты
• Понимание, что computed - это декларативный подход (что должно быть), а не императивный (как сделать)
• Осознание ограничений: отсутствие побочных эффектов, синхронность

Типичные ошибки

• Использование computed для выполнения побочных эффектов (запросы, мутация данных) - это задача для watch
• Обращение к computed как к функции с круглыми скобками - это свойство, а не метод
• Попытка использовать асинхронные операции внутри computed - computed должны быть синхронными
• Создание computed без необходимости, когда достаточно простого метода или data поля
• Изменение computed напрямую без сеттера - это read-only свойство по умолчанию
• Путаница с кешированием: computed кеширует результат, а не вычисление - если зависимости не меняются, возвращается закешированное значение