> Кэшируются ли вычисляемые свойства во Vue и как работает мемоизация (Vue.js)

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

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

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

Кэширование computed свойств - ключевое отличие от методов. Когда вы используете computed, Vue создаёт реактивный watcher, который:

1. При первом обращении к свойству запускает функцию-геттер и собирает все реактивные зависимости (ref, reactive, другие computed)
2. Сохраняет результат в кэш
3. При последующих обращениях возвращает кэшированное значение, не вызывая функцию
4. Когда любая зависимость изменяется, помечает кэш как "грязный" (dirty)
5. При следующем обращении пересчитывает значение и обновляет кэш

Механизм основан на системе реактивности Vue. Каждый computed создаёт внутренний dep (зависимость) и watcher. Watcher подписывается на изменения реактивных данных, используемых в функции. При изменении данных watcher получает уведомление и устанавливает флаг dirty = true. При доступе к свойству проверяется флаг dirty: если true - выполняется пересчёт, если false - возвращается кэш.

Важно: кэширование работает только в рамках одного tick (микротаска). Если computed свойство не используется в шаблоне или другом reactive контексте, оно не будет пересчитываться до момента обращения.

На практике

Кэширование computed критично для производительности в следующих сценариях:

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

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

• Значение зависит от других реактивных данных
• Вы хотите избежать повторных вычислений при множественных обращениях
• Нужна реактивность без ручного управления

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

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

Пример кода

JAVASCRIPT
import { ref, computed } from 'vue'

const items = ref([1, 2, 3, 4, 5])
const filterValue = ref(2)

// Кэшируется - пересчитывается только при изменении items или filterValue
const filteredItems = computed(() => {
  console.log('Вычисление filteredItems')
  return items.value.filter(item => item > filterValue.value)
})

// Без кэширования - выполняется при каждом обращении
function getFilteredItems() {
  console.log('Вызов getFilteredItems')
  return items.value.filter(item => item > filterValue.value)
}

// Первое обращение - вызов функции, кэширование
console.log(filteredItems.value) // 'Вычисление filteredItems', [3,4,5]
// Повторное обращение - из кэша
console.log(filteredItems.value) // нет лога, [3,4,5]

// Изменение зависимости
filterValue.value = 3
// Следующее обращение - пересчёт
console.log(filteredItems.value) // 'Вычисление filteredItems', [4,5]

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

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

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

• Понимание системы реактивности Vue
• Знание разницы между computed, methods и watch
• Умение объяснять внутренние механизмы (dirty flag, dependency tracking)
• Понимание trade-off между кэшированием и актуальностью данных
• Способность применить теорию к практическим сценариям

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

• Путаница computed и methods: думают, что computed тоже вызывается каждый раз
• Игнорирование ленивости: считают, что computed вычисляется сразу при создании компонента
• Непонимание зависимостей: думают, что computed пересчитывается при любом изменении данных в компоненте
• Использование computed для побочных эффектов (нужен watch)
• Ожидание кэширования при нереактивных зависимостях (обычные переменные, Date.now())