Кэширование вычислений

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

Реактивные свойства и зависимые вычисления

В Petite-Vue реактивные данные создаются через объект, передаваемый в createApp. Любое изменение реактивного свойства вызывает обновление связанных с ним элементов интерфейса.

const app = PetiteVue.createApp({
  a: 5,
  b: 10,
  sum() {
    return this.a + this.b;
  }
}).mount();

В этом примере функция sum вычисляется каждый раз при обращении. Если sum вызывается часто, это может приводить к избыточным вычислениям, особенно при сложных вычислениях или большом объёме данных.

Computed свойства

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

const app = PetiteVue.createApp({
  a: 5,
  b: 10,
  sum: PetiteVue.computed(function () {
    console.log('Вычисляем сумму');
    return this.a + this.b;
  })
}).mount();
  • При первом доступе к sum функция выполняется, и результат сохраняется.
  • При последующих обращениях, если a и b не изменились, возвращается кэшированное значение.
  • Если одно из зависимых свойств изменяется, кэш автоматически инвалидируется и вычисление происходит снова.

Это особенно полезно при сложных вычислениях, фильтрации массивов или работе с большими объектами.

Пример с массивами и фильтрацией

const app = PetiteVue.createApp({
  items: [
    { name: 'Apple', category: 'fruit' },
    { name: 'Carrot', category: 'vegetable' },
    { name: 'Banana', category: 'fruit' }
  ],
  selectedCategory: 'fruit',
  filteredItems: PetiteVue.computed(function () {
    console.log('Фильтруем массив');
    return this.items.filter(item => item.category === this.selectedCategory);
  })
}).mount();
  • filteredItems будет пересчитываться только при изменении items или selectedCategory.
  • Доступ к filteredItems не вызывает лишних фильтраций массива.

Ленивая и немедленная инициализация

Computed свойства в Petite-Vue по умолчанию ленивые, то есть функция выполняется только при первом обращении. Иногда требуется немедленное вычисление для предварительной подготовки данных:

const app = PetiteVue.createApp({
  a: 3,
  b: 7,
  sum: PetiteVue.computed(function () {
    return this.a + this.b;
  }, { lazy: false })
}).mount();
  • Опция lazy: false заставляет вычисление выполняться сразу при создании приложения.
  • Это удобно, если результат нужен сразу для отображения или для передачи в другие зависимости.

Реактивные цепочки вычислений

Computed свойства могут зависеть друг от друга, образуя цепочки:

const app = PetiteVue.createApp({
  a: 2,
  b: 3,
  sum: PetiteVue.computed(function () {
    return this.a + this.b;
  }),
  doubleSum: PetiteVue.computed(function () {
    return this.sum * 2;
  })
}).mount();
  • При изменении a или b сначала пересчитывается sum, затем doubleSum.
  • Механизм кэширования обеспечивает, что doubleSum вычисляется только один раз за одно изменение исходных данных.

Ограничения и нюансы

  • Функции, вызываемые внутри computed, не должны иметь побочных эффектов. Любые побочные действия приведут к непредсказуемому поведению.
  • Глубокие изменения объектов и массивов автоматически отслеживаются Petite-Vue, но при необходимости сложных вложенных реакций рекомендуется использовать вспомогательные методы (reactive, ref).
  • Объёмные вычисления внутри computed лучше разбивать на несколько уровней, чтобы минимизировать повторные пересчёты при изменении части данных.

Практическое применение кэширования

  1. Фильтрация и сортировка списков — вычисления выполняются только при изменении данных или условий фильтрации.
  2. Сложные математические расчёты — экономия ресурсов за счёт повторного использования результатов.
  3. Интерполяции в шаблонах — computed свойства предотвращают лишние вызовы функций при рендеринге DOM.

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

Оглавление